webpack：使用externals配置来排除打包后的某个依赖&插件IgnorePlugin的使用

背景

假设，我们写了一个库并使用 webpack 打包输出 bundle，但是这个库依赖一个第三方包，比如依赖 lodash，这时候我们不想把这个库打包进 bundle 里因为体积会变大，而且我们的主项目里已经安装了这个 lodash，所以依赖主项目里的 lodash 就可以了。

那我们应该怎么样去除打包后的 lodash 呢？

使用externals

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
    lodash: 'lodash',
    './echarts': 'echarts'
  },
};
1
2
3
4
5
6
7
8

可以看到，这里的配置是 key: value 形式的。

• key 代表的就是 require 中的值
• value 代表使用哪个全局变量替代它。

例一

src/index.js

require('jquery')
1

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  },
};
1
2
3
4
5
6

这里我们把 jquery 已经排除掉了，那么我们依赖主项目中的哪个变量作为我们排除掉的 jquery 呢？
这个里面的 key（jquery） 是指 require('jquery') 中的 jquery，而 value（jQuery）代表去主项目（也就是全局变量）里找 jQuery 这个变量来代替

例二

src/index.js

require('./echarts')
1

webpack.config.js

module.exports = {
  //...
  externals: {
    './echarts': 'echarts'
  },
};
1
2
3
4
5
6

同理这个就不难理解了，当遇到导入 './echarts' 的时候，就去全局变量里找 echarts。

webpack插件IgnorePlugin

和 externals 功能有点像，但是可以更细力度的控制，比如不打包某个第三方包的某一个文件夹

plugins:[
	new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
]
1
2
3

我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，如果需要我们可以手动引入

import moment from 'moment'

//设置语言

//手动引入所需要的语言包
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);
1
2
3
4
5
6
7
8
9
10
11