webpack4.0 小插件应用

1.webpack小插件应用

• 1. cleanWebpack

webpack在打包时，会查询当前根目录下是否有dist(默认)文件夹，如果有，就将打包后的文件放入dist目录下，如果没有，那么会生成一个新的dist目录，并且将打包的结果插入，如果配置的出口文件带有hash，也就是打包后的文件名会发生变化的情况下，dist目录会越来越大。clean-webpack-plugin这个插件就是为了解决此类问题的，它会清空dist目录，或者删除dist文件夹，并且重新生成，保证dist总是只有最新的代码。这个插件暴露出了多个对象，此处我们只说其“CleanWebpackPlugin”属性。代码如下：

//首先安装： yarn add（或者npm install）clean-webpack-plugin -D
//用法： 
let { CleanWebpackPlugin } = require("clean-webpack-plugin");
new CleanWebpackPlugin();
//或者
let cleanWebpack = require("clean-webpack-plugin");
new cleanWebpack.CleanWebpackPlugin()

• 2.copyWebpackPlugin

当我们有一些文件必须也放到打包后的文件夹（默认dist），但它又与入口entry没有任何直接或者间接的依赖关系。那么我们可以使用“copy-webpack-plugin”插件来达到目的

// 安装  yarn add copy-webpack-plugin -D
let CopyWebpackPlugin = require("copy-webpack-plugin");
plugins: [
    .....
    new CopyWebpackPlugin([
      // 要拷贝的文件
      { from: "./public/a.txt", to: "./" } //"to"字段这里需要注意下，它已经定位到了dist目录下，因此不需要写成"./dist"，否则，会在dist下再生成一个dist目录，将a.txt放在它里边
    ])
  ]

• 3.bannerPlugin(内置插件----用于生成版权声明)

由于bannerPlugin是内置插件，因此需要先引入webpack，应用方式如下

plugins: [
    ...
    new webpack.BannerPlugin('make 2019 by lc')
  ]

打包后的js会带上上边括号内的内容

005255.png