demo17 clean-webpack-plugin (清除模式)

在之前的 demo 中，webpack 打包后会在根目录下自动创建 dist 目录，并且把生成的文件输出到 dist 下。

当配置的输出包名含有 [hash] 时，hash值会随着文件内容的改变而改变。

因此，我们需要在下一次 webpack 打包输出之前，把 dist 目录清空。

clean-webpack-plugin 插件就能帮你做到。

2.clean-webpack-plugin

clean-webpack-plugin 可以实现 webpack 每次打包之前，清空指定目录。

注意: clean-webpack-plugin 插件应该放在 plugins 的最后，因为 webpack 的插件执行顺序是从后往前执行的。 比如:

plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(["dist"]) // 需放在最后一个
  ]
复制代码

3.安装相关依赖

npm install -D clean-webpack-plugin
npm install -D css-loader style-loader
npm install -D html-webpack-plugin webpack 
复制代码

4.目录结构

// `--` 代表目录， `-` 代表文件
  --demo17
    --src
      -app.js
      -style.css      
    -index.html
    -webpack.config.js
复制代码

src/style.css

body {
  background-color: red;
}
复制代码

src/app.js

const css = import('./style.css');
复制代码

5.编写webpack配置文件

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[name]-[hash].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css处理为style标签
        use: [
          "style-loader",
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '设置html的title',// 当设置了template选项后，title选项将失效
      filename: "index.html",
      template: "./index.html",
      minify: {
        // 压缩选项
        collapseWhitespace: true
      }
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};
复制代码