前面已经说明了,webpack是一个打包工具

webpack中,还有个概念,叫插件plugins

  1. loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
  2. 插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
  3. 用来解决一些loaders无法处理的事情

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

例如,我们想在打包的时候,把A文件夹中的数据,放到B文件夹中,可以使用copy-webpack-plugin来进行文件的复制行为

copy-webpack-plugin文档
修改原来的文件目录

1
2
3
4
5
6
7
8
9
10
11
12
    webpack_learn
|- node_modules
|- package.json
|- yarn.lock
+ |- staticFrom
+ |- test.txt
|- src
|- let.js
|- get.js
|- index.js
|- dist
|- main.js

由于使用了copy-webpack-plugin模块,根据commonJs规范,我们需要require这个文件,并且使用npm安装它

1
npm install copy-webpack-plugin #或者yarn add copy-webpack-plugin

我们将config.webpack.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
//config.webpack.js

const path = require('path')
+ const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
//配置函数接受两个参数env和argv
//env:环境对象
//Webpack-CLI 的命令行选项
entry: './src/index.js', //设置默认
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
//里面为匹配的规则
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
},
+ plugins: [
+ new CopyWebpackPlugin([
+ {
+ from: path.join(__dirname, '/staticFrom/'),//将staticFrom文件夹内所有文件
+ to: path.join(__dirname+'/dist/')//复制到根目录下/dist/文件夹内
+ }
+ ])
+ ]
}

然后再执行

1
npm run build #或者yarn build

然后,打包后的文件目录,变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    webpack_learn
|- node_modules
|- package.json
|- yarn.lock
|- staticFrom
|- test.txt
|- src
|- let.js
|- get.js
|- index.js
|- dist
|- bundle.js
|- main.js
+ |- test.txt
|- index.html

test.txt文件就被复制到了dist目录下

这样就成功的使用了webpack插件中的复制插件copy-webpack-plugin

我们在每次打包的时候,如果是同名文件,则会覆盖之前的文件,但是,并没有清除,已经更改后的文件,例如dist目录下的main.js
此时,我们可以使用clean-webpack-plugin插件来清理dist目录,但时刚才,我们的index.html是自己手动新建的,如果清除掉,还需要新建,为了自动化完成这个工作,有两种方案

  1. 使用copy-webpack-plugin插件,复制一个index.html文件到dist目录,方法参考上方
  2. 使用html-webpack-plugin插件,每次都创建一个index.html文件

首先我们使用npm安装它们

1
2
npm install clean-webpack-plugin #或者yarn add clean-webpack-plugin
npm install html-webpack-plugin #或者yarn add html-webpack-plugin

然后修改config.webpack.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
38
39
40
41
42
//config.webpack.js

const path = require('path')
+ const { CleanWebpackPlugin } = require('copy-webpack-plugin')
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
//配置函数接受两个参数env和argv
//env:环境对象
//Webpack-CLI 的命令行选项
entry: './src/index.js', //设置默认
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
//里面为匹配的规则
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
},
plugins: [
+ new CleanWebpackPlugin(),//webpack网站上的示例为new CleanWebpackPlugin(['dist']),这种写法由于CleanWebpackPlugin更新导致不兼容的情况,正确写法如左方所示
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ }),
new CopyWebpackPlugin([
{
from: path.join(__dirname, '/staticFrom/'),//将staticFrom文件夹内所有文件
to: path.join(__dirname+'/dist/')//复制到根目录下/dist/文件夹内
}
])
]
}

然后再执行

1
npm run build #或者yarn build

这样,dist目录,每次都会清理并新建index.html文件了