Question

我有一个关于webpack的问题，特别是关于热重载功能。我正在为此使用webpack-dev-server库。除入口点外，它对于所有javascript文件都运行良好，由于某些奇怪的原因，入口点不会自动进行热替换。以下是我正在使用的webpack.config.js文件。感谢您的帮助，因为我们目前正迷路。

Webpack.config.js

const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  entry: ["./src/hello.js", "./src/scss/custom.scss"],
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: "./dist",
    watchContentBase: true
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      title: 'My Awesome application',
      header: 'Hello World',
      template: './src/index.html',
      filename: './index.html' //relative to root of the application
  }),
  new CopyWebpackPlugin([
    { context: './src/scripts/', from: '**/*.html', to: './' },
	{ context: './src/', from: 'assets/*', to: './' },
  ]),
       new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      },    
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }
};

Answer 1

所以我设法自己解决了这个问题。基本上，这是两个相互冲突的步骤，它们互相压倒了彼此的结果。罪魁祸首是CopyWebpackPlugin步骤，特别是复制资产的那一步。这以某种方式覆盖了dist文件夹中的index.js文件，并使用了较旧的版本。不能完全确定这个旧文件的来源，但是一旦我按照下面的指示进行了操作，问题就得到解决。

    new CopyWebpackPlugin([
   { context: "./src/scripts/", from: "**/*.html", to: "./" },
   { from: "./src/assets", to: "assets" }
]),

Webpack-dev-server问题与入口点的热替换

1 个答案: