html中文网站模板下载江西火电建设公司网站
背景
假设，我们写了一个库并使用 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 功能有点像，但是可以更细力度的控制，比如不打包某个第三方包的某一个文件夹
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);