javascript - webpack 4 - HMR 不刷新 html 和 scss (ReactJS)

Question

我正在为我的应用程序配置 webpack，并且在开发模式下我希望 HMR 在 html scss 和 jsx 文件的每次更改时刷新我的页面。我的入口点是 js/app.jsx 文件，我正在导入 scss 文件，一切正常，但是当我更改 style.scss 中的某些内容时，只有当我手动刷新页面时才能看到结果，并且在 HMR 控制台中我看到“App是最新的”。

在 package.json 中我运行此命令

"start": "webpack-dev-server --colors --hot --inline"

网络包:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: "./js/app.jsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "out.[hash].js",
        publicPath: "/"
    },
    watch: true,
    mode: "development",
    devServer: {
        contentBase: "./",
        port: 3000,
        inline: true
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015","stage-2", "react"]
                    }
                }
            },
            {
                test: /\.(png|jpg)$/,
                exclude: "/node_modules/",
                use: ["file-loader"]
            },
            {
                test: /\.scss$/,
                use: ['css-hot-loader',MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
                exclude: "/node_modules/"
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style.[hash].css"
        }),
        new HtmlWebpackPlugin({
            title: "Hello World",
            template: "./index.html",
            filename: "index.html"
        }),
        new CleanWebpackPlugin("dist")
    ]
};

app.jsx

require("../scss/style.scss");
import React from "react";
import ReactDOM from "react-dom";

document.addEventListener("DOMContentLoaded", function() {
  ReactDOM.render(<h1>Hello World!!</h1>, document.getElementById("app"));
});

Answer 1

when I change something in style.scss I can see result only when i refresh manually page

这是我实现预期自动刷新的最小设置。希望这可能有所帮助。

<小时/>

webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode:'development',
  devServer: {
    hot: true,
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'React App',
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

<小时/>

.babelrc

{
  "presets": ["env", "react", "stage-2"],
  "plugins": ["react-hot-loader/babel"]
}

<小时/>

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

<小时/>

App.js

import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
class App extends Component {
  state = {};
  render() {
    return <div>App</div>;
  }
}
export default hot(module)(App);

<小时/>

index.js

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import './index.scss';

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

<小时/>

index.scss

$mycolor: blue;
body {
  background-color: $mycolor;
}

<小时/>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

<小时/>

文件夹结构

<小时/>

这是演示: