webpack入门学习笔记15 —— Webpack中的三个小插件

1. 写在前面

在前面的博客中我们说过，webpack之所以有这么强大的功能，是因为它借助了很多 loader 和 插件 的帮助。在之前webpack配置中，我们已经介绍了很多 loader 和 插件 ，在这里再介绍三种小插件，可以帮助我们更好地使用webpack构建项目。

这三款插件分别是：CleanWebpackPlugin、CopyWebpackPlugin、BannerPlugin(webpack内置插件)。下面一一对这些插件进行介绍。

2. CleanWebpackPlugin

该插件的作用是：每次进行 build 的时候，将之前的dist目录下的代码清除，然后再打包生成新的代码文件。

当我们在使用 build 命令进行打包编译项目的时候，webpack会根据配置信息，将打包编译好的项目输出到一个文件夹中(默认文件夹是dist) 。在项目的开发过程中，我们肯定会多次执行 build 命令，这个时候我们希望每次执行 build 命令的时候，都可以将之前打包生成的代码文件删除，然后生成最新的代码文件。

但是实际情况却是之前的代码不会删除，比如：第一次打包编译项目，生成了a.js文件，第二次打包编译项目，生成了b.js文件。这个时候，a.js文件使用不到的，但该文件还是会存在dist文件夹下，这是我们不愿意看到的。

这里我们可以借助CleanWebpackPlugin插件进行删除之前的文件，首先执行以下命令进行安装插件：

yarn add clean-webpack-plugin -D

安装完成之后，在 webpack.config.js 文件中书写以下代码进行配置：

let CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    /* 节省篇幅，其余配置已省略 */
    plugins: [
        new CleanWebpackPlugin([
            './dist'	// 指定你要清楚文件的目录，可以传入多个目录参数
        ])
    ]
    
}

这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。

3.CopyWebpackPlugin

该插件的作用是：在每次进行 build 的时候，将某些静态资源复制到特定文件夹下。

比如将一些特定的Excel文件，拷贝到dist 目录下，可以借助这款插件的帮助。使用这款插件，首先要执行以下命令进行安装：

yarn add copy-webpack-plugin -D

配置代码也是非常简单，直接在 webpack.config.js 文件中书写以下代码：

let CopyWebpackPlugin = require('copy-webpack-plugin')

modules.export = {
    /* 节省篇幅，其余配置已省略 */
    plugins: [
        new CopyWebpackPlugin([
            // 参数是数组，可以对多个位置的文件进行copy 
            { from: './doc', to: './dist' }
        ])
    ]
}

这里需要说明的是，这里的 from 和 to 属性根据自己的实际情况进行配置。

4. BannerPlugin(webpack内置插件)

这是一款webpack的内置插件，作用是：代码版权声明插件，在编译好的 .js 文件的头部插入我们指定的版权声明文字，起到版权声明的作用。

既然是webpack内置插件，所以我们不用额外进行安装，可以直接进行在 webpack.config.js 文件中进行配置，示例代码如下：

let webpack = require('wepack');

modules.export = {
    plugins: [
        // 参数是你要一个字符串，值是你要添加的版权声明信息
        new webpack.BannerPlugin('Made by Allen Feng')
    ]
}

配置完成之后，再次进行打包编译项目，就可以在生成的 .js 文件中看到我们的版权信息：

/*! Made by Allen Feng */!function(e){var n={};function t(r){if(n[r])return n[r]......

5. 写在最后

以上便是这三款小插件，可以帮助我们更好的使用webpack构建项目。

上一篇: webpack入门学习笔记14 —— Webpack的源码映射