webpack 4.8.3

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ming_221/article/details/82805529

webpack 4.8.3

配套的插件几乎都需要升级，如果编译过程中遇到插件报错，先升级。

babel

babel编译react时配置的 preset 里多了个 env

"presets": ["env", "es2015", "react"]

htmlWebpackPlugin

可通过在配置文件中添加多次这个插件，来生成多个 HTML 文件。通过chunks过滤要加到 html 中的文件。

var path = require('path');
var glob = require('glob');
/ 单页自动写入js，需每页对应一个htmlPlugin
function htmlPlugins (templatePath){
    var files = glob.sync(templatePath);
    var plugins = [];
    for(let f of files){
        dirname = path.dirname(f);
        basename = path.basename(f, '.html');
        //console.log(dirname, basename);
        plugins.push(new HtmlWebpackPlugin({
            filename: basename + '.html',
            template: f,
            inject: true,
            chunks: [basename]
        }));
    }
    return plugins;
}

这样的话虽然可以自动化生成页面，但是单页一多，打包的速度也变慢了，所以开发的时候建议只把当前需要改动的几个单页应用的页面模板路径加到htmlPlugin里，这样可以提升打包效率。

hot module（webpack-hot-middleware）

此时 React 中的 state 在热加载时仍然会被 reload，不能保持组件状态

// webpack.config.js
module.exports.plugins = [
    new webpack.HotModuleReplacementPlugin()
]
// 打包文件入口
if (module.hot) {
  module.hot.accept();
}

react-hot-loader 4

需配合 es6 语法使用，暂未配置成功

好文！！！追溯 React Hot Loader 的实现

官网配置

似乎无法实现配置到根目录实现热加载，而是在需要进行热加载的组件，设置 export default hot(module)(App)。修改设置了热加载的组件，则该组件 及 由该组件更新引起的子组件更新都将保持状态，但是修改设置了热加载组件的子组件则不会保持父、子组件的状态

questions

1. 用以上单页打包模式，监听页面变化并重新打包的时候会很慢，8-9s才编译完成，待优化

------- 2018.6.6