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