webpack使用webpack-dev-middleware进行热重载
新手，刚开始学习webpack，想使用webdevserver，但定制性太差，于是研究了一下使用webpack-dev-middleware进行指定。
根据文档https://www.npmjs.com/package/webpack-hot-middleware
需要配置entry和output.
常规配置
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].[hash].js',
},
但在热重载中，文件是不存放在硬盘上的，而是使用了memory-fs模块存放在内存中的，因此原始规则不能使用了。
查看与webpack-dev-middleware配合需要使用到webpack-hot-middleware，在内存中使用时需要为入口文件添加一个'webpack-hot-middleware/client'，
同时输出的文件也和原来不同，文件不再带有根目录，因此，Path和publicpath均需要修改，结果如下：
entry: {
app:[
'webpack-hot-middleware/client',
'./src/main.js'
],
},
output: {
path: '/',
// publicPath: '/'
},
同时还需要添加相应的热重载插件：
plugins: [
// Webpack 1.0
new webpack.optimize.OccurenceOrderPlugin(),
// Webpack 2.0 fixed this mispelling
// new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
至此Js文件的生成已经完成了，但缺少Html,一样不能访问，需要使用'html-webpack-plugin'处理Html文件，复制到内存中。
全样式代码
index.js
let express = require('express');
let webpack = require("webpack");
const fs = require('fs')
let app = express()
let port;
let webpackconfig = require('./build/webpack.dev.config');
webpackconfig(app)
app.use(express.static('./static'));
app.get('/', function(req, res, next){
next();
})
app.listen(port || 9999, function(e){
console.log(`server start at ${port}`);
});
webpack.base.config.js
var webpack = require("webpack");
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].[hash].js',
},
module: {
rules:[
{
test: /\.js/,
include:[path.resolve(__dirname,'src')],
loader: 'babel',
options: {
presets: 'es2015',
}
},
{
test: /\.vue/,
loader: 'vue',
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
extensions: ['.vue','.js', 'json', ' '],
alias: {
'components': './src/',
}
},
}
webpack.dev.config.js
let webpack = require("webpack");
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let devMiddleWare = require('webpack-dev-middleware');
let hotMiddleWare = require('webpack-hot-middleware');
let baseConfig = require('./webpack.base.config');
let devOption = {
entry: {
app:[
'webpack-hot-middleware/client',
'./src/main.js'
],
},
output: {
path: '/',
// publicPath: '/'
},
plugins: [
// new webpack.optimize.OccurenceOrderPlugin(),
// Webpack 2.0 fixed this mispelling
// new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
]
}
module.exports = function(app){
let webpackconfig = Object.assign({}, baseConfig, devOption);// console.log(webpackconfig);
var compiler = webpack(webpackconfig);// console.log(compiler);
app.use(devMiddleWare(compiler,{
publicPath: webpackconfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
}));
app.use(hotMiddleWare(compiler));
return app;
}