当文件在static或public目录下但又想对文件进行编译处理,即可在此插件中进行配置

使用说明

copy-webpack-plugin是webpack自带的插件,本意是将某个文件/文件夹,从dir1处复制到dist下,即当你在运行npm run build时,static或public目录下的文件就是走的此插件

配置信息

因为我使用的是基于@vue/cli-servicevue3.x,所以是在vue.config.js中设置(如果是vue2.x的版本,请在webpack.base.js中设置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 引入
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJS = require('uglify-js')

// 使用
let config = {
// ...others,
configureWebpack: config => {
config.plugins.push(
// see document: https://www.npmjs.com/package/copy-webpack-plugin/v/5.1.2
new CopyWebpackPlugin([
{
from: resolve('./public/handle.js'), // 文件名或目录
to: './[name].[contenthash].[ext]', // 文件名后添加hash值
transform(content, path) { // 修改文件内容
const code = UglifyJS.minify(content.toString()).code;
return code;
},
transformPath(targetPath, absolutePath) { // 修改文件路径:目标路径、源路径
newHashPath = targetPath;
return targetPath;
},
},
{
from: resolve('./public/index2.html'),
to: './[name].[ext]',
transform(content, path) {
let code = UglifyJS.minify(content.toString()).code;
return code;
},
force: true, // 覆盖已经存在的文件
},
])
);
},
}
module.exports = config;

祝君无Bug~