Question

我无法弄清楚为什么开发服务器不想在浏览器中重新加载页面。我的系统是OSX。

webpack.config.js

const path = require("path");

module.exports = {

entry: {
    //context: path.resolve("dev", "js"),
    main: path.resolve("dev", "js", "app.js")
},

output: {
    path: path.resolve(__dirname, "public"),
    publicPath: path.resolve(__dirname, "public"),
    filename: "[name].js"
},

module: {
    rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['env']
            }
        }
    }
    ]
},

devServer: {
    contentBase: path.resolve(__dirname, "public"),
    watchContentBase: true,
    port: 9090,
    hot: true,
    inline: true,
},

watch: true,

watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
}

}

的package.json

{
"name": "react-sap",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "webpack": "^3.5.5",
    "jquery": "^3.2.1"
}
}

index.html位于“公共”目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack2</title>
    <script src="/main.js" defer></script>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

更改app.js后，我必须手动重新加载页面才能看到更改。帮助PLZ。我很确定这里有简单的解决方案

P.S。对不起我的英文）

Answer 1

安装模块并将其作为插件传递。

https://webpack.js.org/guides/hot-module-replacement/

webpack-dev-server不会重新加载页面

1 个答案: