前面已经说明了,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