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

背景

假设,我们写了一个库并使用 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/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,如果需要我们可以手动引入文章来源地址https://www.uudwc.com/A/zkpjn/

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/weixin_43972437/article/details/133271934

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年09月26日 13:50
基于微信家政服务预约小程序毕业设计成品作品全套(1)系统效果图
下一篇 2023年09月26日 13:51