最近终于有时间实施将公司的前端项目升级到Webpack4 我是从3.6升到4.16
先说一下关于loaders，总体来说基本上全部使用到的loader都升级到最新是没错的。
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
[3] You may need an appropriate loader to handle this file type.
[3] SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
解决办法
{
test: /\.json$/i,
type: 'javascript/auto',
loader: 'json-loader'
}
虽然Webpack2开始集成了json-loader但是不知道为什么还是出现了这个问题，我这边对于这些json的用法都是在bundle-loader?lazy!中出现的，但是加上这个就解决了。
extract-text-webpack-plugin 和 mini-css-extract-plugin
这个插件原来是帮助将Css从Js中抽取出来的，但是在Webpack4后 有了新的解决方案，不再使用这个插件了
mini-css-extract-plugin 官网的用法都比较清楚，需要注意的是，目前这个mini-css-extract-plugin的loader不能和thread-loader 以及happyloader搭配使用，相关issues
HtmlWebpackPlugin
这个就很简单了 目前要使用@next版本
安装的时候需要
yarn add HtmlWebpackPlugin@next -D
优化
uglifyjs-webpack-plugin
在Webpack中的配置中提供一个minimizer选项，这个选项在production环境下默认是开启的，这样就不用区别对待dev和prod的插件列表了。
这里需要说一下UglifyJsPlugin的parallel 默认是不开启的，这个配置项在Webpack4中才有效，所以这里需要设置一下。
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
],
},
splitChunks
其实默认选项已经比较合理了，但是面对定制化的分包需求就需要进一步设置。
可以看一下这些文章
一步一步的了解webpack4的splitChunk插件
没有了CommonsChunkPlugin，咱拿什么来分包（译）
Webpack 4 — Mysterious SplitChunks Plugin
搞清楚chunks的类型很重要
使用webpack-serve代替webpack-dev-server
webpack-serve应该是未来的方向，webpack-dev-server目前应该是处于只维护的状态。
在采用webpack-serve前需要考虑的一点是，由于webpack-serve采取的是websocket,所以不支持旧的浏览器，这点上面是不会改变的，所以如果要采取这个方案需要考虑这点。
在使用webpack-serve的时候发现了一个问题，watch的功能是一个addons，而且官方的例子也是有问题的，这里发一下正确的以及反馈的issues
module.exports.serve = {
content: [__dirname],
hotClient: {
host: 'localhost',
port: 8090,
},
on: {
listening({server}) {
const socket = new WebSocket('ws://localhost:8090');
const watchPath = __dirname;
const options = {};
const watcher = chokidar.watch(watchPath, options);
watcher.on('change', () => {
const data = {
type: 'broadcast',
data: {
type: 'window-reload',
data: {},
},
};
socket.send(stringify(data));
});
server.on('close', () => {
watcher.close();
});
},
},
};