index.html在监视触发后重新编译后消失

Question

我有一个Chrome扩展程序，我从这里开始使用webpack。我可以很好地构建它，但是在开发模式下，当第一次重新编译触发后运行npm run watch时，index.html从构建目录中消失。

这里是我package.json的脚本部分：

    "build": "node utils/build.js",
    "watch": "webpack --watch & webpack-dev-server --inline --progress --colors"
  }

我的webpack.config.js ：（我也列出了一堆内容脚本作为单独的入口点，我也省略了）

    path = require("path"),
    env = require("./utils/env"),
    CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
    CopyWebpackPlugin = require("copy-webpack-plugin"),
    HtmlWebpackPlugin = require("html-webpack-plugin"),
    WriteFilePlugin = require("write-file-webpack-plugin"),
    MiniCssExtractPlugin = require('mini-css-extract-plugin');

const fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];

const options = {
  mode: process.env.NODE_ENV || "development",
  entry: {
    // the single js bundle used by the single page that is used for the popup, options and bookmarks
    index: path.join(__dirname, "src", "", "index.js"),

    // background scripts
    "js/backgroundScripts/background": path.join(__dirname, "src", "js/backgroundScripts", "background.js"),
    "js/backgroundScripts/messaging": path.join(__dirname, "src", "js/backgroundScripts", "messaging.js")
  },
  output: {
    publicPath: '',
    path: path.join(__dirname, "build"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          cache: true,
          emitWarning: true
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: true,
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: new RegExp('\.(' + fileExtensions.join('|') + ')$'),
        loader: "file-loader?name=[name].[ext]",
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    extensions: fileExtensions.map(extension => ("." + extension)).concat([".jsx", ".js", ".css"])
  },
  plugins: [
    // clean the build folder
    new CleanWebpackPlugin(),
    // expose and write the allowed env vars on the compiled bundle
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
      DEBUG: false
    }),
    // copies assets that don't need bundling
    new CopyWebpackPlugin([
      "src/manifest.json",
      {
        from: "src/css",
        to: 'css/'
      },
      {
        from: "src/_locales",
        to: '_locales/'
      },
      {
        from: "src/images",
        to: 'images/'
      }
    ], { copyUnmodified: true }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
      filename: "index.html",
      chunks: ["index"]
    }),
    new WriteFilePlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  devServer: {
    writeToDisk: true,
    contentBase: path.join(__dirname, "../build")
  }
};

if (env.NODE_ENV === "development") {
  options.devtool = "cheap-module-source-map";
}

module.exports = options;

我可以在初始构建日志中看到index.html，但之后没有任何。

我会很感激为什么发生这种情况以及如何解决它的任何线索。谢谢。

Answer 1

您应该将此行仅作为生产环境的条件：

new CleanWebpackPlugin()

在插件部分。