webpack4 常用插件

1、copy-webpack-plugin拷贝文件
(1)下载
	cnpm install copy-webpack-plugin --save-dev
(2)配置
	const CopyPlugin = require("copy-webpack-plugin");
	
	plugins:[ 支持glob匹配语法和占位符等
		    new CopyPlugin({
		      patterns: [
		        {
		          from: "**/*",
		          to: "relative/path/to/dest/",
		        },
		        {
		          from: "**/*",
		          to: "/absolute/path/to/dest/",
		        },
		        {
		          from: "**/*",
		          to: "[path][name].[contenthash].[ext]",
		        },
		      ],
		    }),
		]

2、水印插件webpack.BannerPlugin
	会将传入的内容添加注释到打包后的每一个js文件首部
	plugins:[
		new webpack.BannerPlugin('内容')
	]

3、定义全局变量插件webpack.DefinePlugin
	会直接替换文本即去掉第一层引号,所以字符串使用单双引号一起使用,'"production"'或使用JSON.stringify
	plugins:[
	    new webpack.DefinePlugin({
	      PRODUCTION: JSON.stringify(true),
	      VERSION: JSON.stringify('5fa3b9'),
	      BROWSER_SUPPORTS_HTML5: true,
	      DEV:"'dev'",
	      TWO: '1+1',
	      'typeof window': JSON.stringify('object'),
	      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
	    }),
	]
	使用时在代码中直接使用键名即可,生产/开发模式切换,即通过条件判断变量的值
		例子:if(DEV=='dev')...,上线时,手动修改DEV的值
		或者建立不同环境的webpack,通过webpack-merge合并
		或者使用cross-env执行命令时动态修改process.env中的环境变量

4、忽略require或import引入模块插件webpack.IgnorePlugin
	忽略的内容想使用需要再次引入
	new webpack.IgnorePlugin(requestRegExp, [contextRegExp])
	    requestRegExp 匹配(test)资源请求路径的正则表达式。
	    contextRegExp (可选)匹配(test)资源上下文(目录)的正则表达式,即库名。
	    或者传入对象形式
	    {
		  resourceRegExp: /^\.\/locale$/,
		  contextRegExp: /moment$/
		}
	如:忽略在moment库内部一个引用require('./locale')
		new webpack.IgnorePlugin(/\.\/locale/,/moment/),

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/113704080