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();

      });

    },

  },

};