webpack学习笔记7-插件

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

在webpack中，还有个概念，叫插件plugins

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

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

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

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

    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安装它

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

我们将config.webpack.js文件修改为如下内容

//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/文件夹内
+               }
+           ])
+       ]
    }

然后再执行

npm run build #或者yarn build

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

    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安装它们

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

然后修改config.webpack.js

//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/文件夹内
                }
            ])
        ]
    }

然后再执行

npm run build #或者yarn build

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