Webpack 开发服务器会重新加载，但页面不会改变答案

【问题标题】：Webpack dev server DO reload, but page not changeWebpack 开发服务器会重新加载，但页面不会改变
【发布时间】：2017-01-13 09:35:32
【问题描述】：

这是我的 package.json 文件：

{
  "name": "postronix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "transpile": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.14.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.9.0",
    "sass-loader": "^4.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "jquery": "^3.1.0"
  }
}

webpack.config.js：

const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react', 'stage-0'],
                'plugins': ['react-html-attrs']
            }
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('css!sass')
        }
        ]
    },
    plugins: [
    new ExtractTextPlugin('public/style.css', {
        allChunks: true
    })
    ]
}

我运行这个命令：

webpack-dev-server --content-base ./ --hot

每当我对我的 app.js 文件进行更改时，此日志都会显示在 gitbash 中：

Version: webpack 1.13.2
Time: 183ms
           Asset      Size  Chunks             Chunk Names
   app.bundle.js    532 kB       0  [emitted]  main
public/style.css  84 bytes       0  [emitted]  main
chunk    {0} app.bundle.js, public/style.css (main) 496 kB [rendered]
    [0] ./src/app.js 1.1 kB {0} [built]
     + 300 hidden modules
webpack: bundle is now VALID.

在 chrome 浏览器中，我打开了http://localhost:8080/webpack-dev-server/，每次我修改 app.js 时都会重新加载页面屏幕，但页面没有任何变化，就像 app.js 和我之前一样。

它只是用 webpack --watch 编译的。

请帮忙

【问题讨论】：

标签： javascript reactjs ecmascript-6 webpack

【解决方案1】：

终于找到答案了。我把 publicPath: "/assets/" 放在 webpack.config.js 中

在 index.html 中，我为引用脚本添加“资产”路径：

<script src="assets/app.bundle.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="assets/public/style.css">

现在，它的编译和重新加载完美。

【讨论】：