之前的《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
的配置方式,参考官方文档。
发表回复