Проблема Webpack-dev-server с горячей заменой точки входа - PullRequest
Новая
       18

Проблема Webpack-dev-server с горячей заменой точки входа

2 голосов
/ 09 марта 2019

У меня проблема с веб-пакетом, особенно с функцией горячей перезагрузки. Для этого я использую библиотеку 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"]
      }
    ]
  }
};

1 Ответ

0 голосов
/ 10 марта 2019

Так что мне удалось решить проблему самостоятельно. В основном это были два противоречивых шага, которые перекрывали результаты друг друга. Виновным шагом был шаг CopyWebpackPlugin, в частности, тот, который копировал ресурсы. Это как-то перезаписывало файл index.js в папке dist старой версией. Не совсем уверен, откуда взялся этот старый файл, но как только я уточнил шаг, как указано ниже, проблема была исправлена. 

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