背景
假设,我们写了一个库并使用 webpack 打包输出 bundle,但是这个库依赖一个第三方包,比如依赖 lodash,这时候我们不想把这个库打包进 bundle 里因为体积会变大,而且我们的主项目里已经安装了这个 lodash,所以依赖主项目里的 lodash 就可以了。
那我们应该怎么样去除打包后的 lodash 呢?
使用externals
module.exports = {
//...
externals: {
jquery: 'jQuery',
lodash: 'lodash',
'./echarts': 'echarts'
},
};
可以看到,这里的配置是 key: value
形式的。
- key 代表的就是 require 中的值
- value 代表使用哪个全局变量替代它。
例一
src/index.js
require('jquery')
webpack.config.js
module.exports = {
//...
externals: {
jquery: 'jQuery'
},
};
这里我们把 jquery 已经排除掉了,那么我们依赖主项目中的哪个变量作为我们排除掉的 jquery 呢?
这个里面的 key(jquery) 是指 require('jquery')
中的 jquery,而 value(jQuery)代表去主项目(也就是全局变量)里找 jQuery 这个变量来代替
例二
src/index.js
require('./echarts')
webpack.config.js
module.exports = {
//...
externals: {
'./echarts': 'echarts'
},
};
同理这个就不难理解了,当遇到导入 './echarts'
的时候,就去全局变量里找 echarts。
webpack插件IgnorePlugin
和 externals 功能有点像,但是可以更细力度的控制,比如不打包某个第三方包的某一个文件夹文章来源:https://www.uudwc.com/A/zkpjn/
plugins:[
new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中,如果引用了./locale/目录的内容,就忽略掉,不会打包进去
]
我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,如果需要我们可以手动引入文章来源地址https://www.uudwc.com/A/zkpjn/
import moment from 'moment'
//设置语言
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);