Webpack4 升级优化笔记

[Sunshine168]

Webpack4 升级优化笔记

最近终于有时间实施将公司的前端项目升级到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();
      });
    },
  },
};