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/),
일반적으로 사용되는 webpack4 플러그인
추천
출처blog.csdn.net/weixin_43294560/article/details/113704080
추천
행