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 的配置方式,参考官方文档

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据