做外国人的生意哪家网站好,网页设计代码设计的代码有哪些,网站的开发流程分哪几步,wordpress 常见漏洞背景
假设#xff0c;我们写了一个库并使用 webpack 打包输出 bundle#xff0c;但是这个库依赖一个第三方包#xff0c;比如依赖 lodash#xff0c;这时候我们不想把这个库打包进 bundle 里因为体积会变大#xff0c;而且我们的主项目里已经安装了这个 lodash#xff0…背景
假设我们写了一个库并使用 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 呢 这个里面的 keyjquery 是指 require(jquery) 中的 jquery而 valuejQuery代表去主项目也就是全局变量里找 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);
