Webpack 4 笔记

之前的《Webpack 笔记》内容有些陈旧，不打算再改，改名为《Webpack 3 笔记》。今后关于 Webpack 4 的笔记写在这里。如果将来 Webpack API 再次发生巨大变化，类似 3->4 这样，就再开一篇。

库项目中的 lodash tree-shaking

lodash 是非常好用的工具函数库，可以大大提高开发效率，不过也有缺点，就是体积大，冗余多。

解决方案是 tree shaking，只保留用到的代码。这时就要用 import isArray from 'lodash/isArray' 替换 import {isArray} from 'lodash'。

但是对于库项目，lodash 不应该包含在最终文件里，所以要用 externals 把它排除在打包之外，此时就不能再用平时的写法，要混合函数一起用：

module.exports = {
  externals: [
    {
      'edge-http.js': 'commonjs edge-http.js',
      'bluebird-ui': 'commonjs bluebird-ui',
      'vue': 'commonjs vue',
    },
    function (context, request, callback) {
      if (/^lodash\//.test(request)){
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },
  ],
}

关于 externals 的配置方式，参考官方文档。