18、webpack优化(3)——IgnorePlugin

IgnorePlugin

1. 这是webpack内置插件
2. 这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去

举例：

moment包

比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。

moment包打包的问题

假设我们的代码值引入了以下一个API

import moment from 'moment'

//设置语言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

这样打印出来的就是中文的时间，因为我在使用这个API的时候，前面设置了语言类型moment.locale为中文zh-cn。

但是，虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢

所以，最好能够少打包一些没用的依赖目录进去

而moment的包含’./locale/‘该字段路径的文件目录就是各国语言的目录，比如’./locale/zh-cn’就是中文语言

IgnorePlugin的使用

1. 该插件能够使得指定目录被忽略，从而使得打包变快，文件变小
2. 使用方法：

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

3. 问题存在与解决

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

import moment from 'moment'

//设置语言

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

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log(r);

这样就OK了。既能够显示中文，又把不必要的语言包都忽略打包了