IgnorePlugin
這是webpack內置插件
這個插件的作用是:忽略第三方包指定目錄,讓這些指定目錄不要被打包進去
舉例:
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的使用
該插件能夠使得指定目錄被忽略,從而使得打包變快,文件變小
使用方法:
let Webpack = require('webpack');
plugins:[
new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment這個庫中,如果引用了./locale/目錄的內容,就忽略掉,不會打包進去
]
問題存在與解決
我們雖然按照上面的方法忽略了包含’./locale/'該字段路徑的文件目錄,但是也使得我們使用的時候不能顯示中文語言了,所以這個時候可以手動引入中文語言的目錄
import moment from 'moment'
//設置語言
//手動引入所需要的語言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);
作者:俞華
原文:https://blog.csdn.net/qq_17175013/article/details/86845624