cleanWebpackPlugin
清除webpack生成的文件,默认删除output中路径的文件。
一般我们都会在输出文件的名称中加上哈希,但是这样就导致了,每次打包后还存留之前打包的文件,因此我们就需要这个插件清除之前生成的文件,只保留最新的打包文件
安装npm install clean-webpack-plugin -D
// 引入
const { CleanWebpackPlugin } = require (' clean-webpack-plugin ') ;
// 使用
module.exports = {
plugins: [
new CleanWebpackPlugin(),// 一般情况这样就可以使用
]
}
// 配置项 new CleanWebpackPlugin(options)
options = {
dry: true,// 默认false, 设置成true时,不会清除原始文件
verbose: true, // 默认为false,在控制台打印日志; 当dry为true时,默认为true打印
// 打印的log如下
// lean-webpack-plugin: removed dist/a.42fa09.js
// clean-webpack-plugin: removed dist/index.42fa09.js
// clean-webpack-plugin: removed dist/index.html
// clean-webpack-plugin: removed dist/main.css
cleanStaleWebpackAssets: false, // 默认值:true 在重建时自动删除所有未使用的webpack资产
protectWebpackAssets :false ,// 默认值:true 不允许删除当前的webpack资产
}
copy-webpack-plugin
将一些文件复制到打包后的文件中;
安装cnpm i copy-webpack-plugin
可参考链接:
copy-webpack-plugin npm
copy-webpack-plugin webpack
// 引入
const copyWebpackPlugin = require (' copy-webpack-plugin ') ;
// 使用
module.exports = {
new copyWebpackPlugin({
patterns:[
{from:'src/iu.jpeg',to:'./dist'}, // 复制到出口dist文件下的一个新建的dist文件内
{from:'src/iu.jpeg',to:''}, // 默认出口dist文件下
]
})
}
webpack内置插件 BannerPlugin
为文件头部添加 banner,html文件除外。
由于是webpack内部插件,因此只需在文件引入webpack即可
// 引入
const webpack = require('webpack')
module.exports = {
plugins: [
// 使用
new webpack.BannerPlugin({
banner: 'made by clearNew',
raw: false, // 如果值为 true,将直出,不会被作为注释
test: string | RegExp | Array,
entryOnly: true, // 如果值为 true,将只在入口 chunks 文件中添加
include: string | RegExp | Array, // 匹配包含的文件
exclude: string | RegExp | Array, // 排除某些文件
})
]
}
清除 console.log
一般打包后的文件中我们不希望有console.log等测试内容,那么就需要一些配置或使用指定插件
1、在处理js的插件中清除console.log
npm i terser-webpack-plugin -D
const TerserJSPlugin = require('terser-webpack-plugin')
optimization: { // 优化项配置
minimizer: [
new TerserJSPlugin({
terserOptions: {
compress: {
pure_funcs: ["console.log"]
}
}
}),
],
},
2、使用babel-plugin-transform-remove-console
cnpm i babel-plugin-transform-remove-console -D
// 在webpack.config.js中配置
{
test: /\.js$/,
use: [{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: [
["transform-remove-console"]
],
},
}],
exclude: "/node_module/", // 排除node_module中的js文件
},
// 或在babel.config.js中配置
const prodPlugins = []
// 如果是发布模式则启用的插件
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
...prodPlugins
]
}
欢迎指正,一起讨论学习