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;
}