[文档总结]webpack指南：模块热替换，tree shaking，生产环境构建

[shoutingwei]

1. 模块热替换

模块热替换(Hot Module Replacement )允许在运行时更新各种模块，无需进行完全刷新。

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
       app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true//new add
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
     new webpack.NamedModulesPlugin(),//new add 更方便查看要修补的依赖
     new webpack.HotModuleReplacementPlugin()//new add
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

index.js

...

 if (module.hot) {
   module.hot.accept('./xxx.js', function() {
     console.log('Accepting the updated xxx module!');
     ...
   })
 }

[shoutingwei]

2. Node JS 忽略