我正在为我的应用程序配置webpack,并且在开发模式中我希望HMR能够在html scss和jsx文件的每个更改中刷新我的页面。我的入口点是js / app.jsx文件,我正在导入scss文件,一切正常但是当我在style.scss中更改某些内容时,我只能在手动刷新页面时看到结果,并且在HMR控制台中我看到“App”已是最新”。
在package.json中我运行此命令
"start": "webpack-dev-server --colors --hot --inline"
的WebPack:
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"));
});
当我在style.scss中更改某些内容时,只有在我手动刷新页面时才会看到结果
这是我实现预期的自动刷新的最小设置。希望这可能有所帮助。
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>
文件夹结构
这是演示: