index. html исчезает после повторной компиляции, вызванной наблюдением - PullRequest
Новая
       36

index. html исчезает после повторной компиляции, вызванной наблюдением

0 голосов
/ 05 марта 2020

У меня есть расширение Chrome, с которого я начал использовать веб-пакет. Я могу построить его очень хорошо, но в режиме разработки, когда я запускаю npm run watch после запуска первой перекомпиляции, индекс. html исчезает из каталога сборки.

Вот часть сценария моего пакета. 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;

Я вижу индекс. html, указанный в исходном журнале сборки, но ни один из них после этого.

Буду признателен за любые подсказки о том, почему это происходит и как я могу это исправить. Спасибо.

1 Ответ

1 голос
/ 05 марта 2020

В разделе плагинов вы должны поставить эту строку условно только для производственной среды: 

new CleanWebpackPlugin()

Так как она предназначена для очистки папки сборки.

...