webpack4 常用插件

﹏ヽ暗。殇╰゛Y 2021-07-24 22:27 481阅读 0赞

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/),