Question

我正在使用npm脚本npm start在终端中运行webpack-dev-server --progress --colors --hot --inline --open。我的React应用程序在本地服务器上加载正常。但是，当我进行任何SCSS更改时，我看到：

webpack: bundle is now INVALID.
Hash: 619812c0fa6ffc42708e
Version: webpack 1.13.3
Time: 343ms
                               Asset       Size  Chunks             Chunk Names
                           bundle.js    1.02 MB       0  [emitted]  main
0.065f433e5a1a691720c9.hot-update.js  659 bytes       0  [emitted]  main
065f433e5a1a691720c9.hot-update.json   36 bytes          [emitted]
chunk    {0} bundle.js, 0.065f433e5a1a691720c9.hot-update.js (main) 946 kB [rendered]
  [249] ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/styles/main.scss 586 bytes {0} [built]
     + 251 hidden modules
webpack: bundle is now VALID.

但是，该页面并未反映我所做的任何SCSS或JS更改。我的bundle.js根本没有更新。但是，如果我在另一个终端窗口中运行webpack，我的bundle.js会更新，然后如果我刷新页面，我可以看到我的更改。

这是我的webpack.config.js：

var webpack = require("webpack");

module.exports = {
  entry:  "./src/main.js",
  output: {
    path: "./build/scripts",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.jsx?$/,
        loader: "babel",
        exclude: "./node_modules"
      },
      { test: /\.scss$/,
        loaders: [ "style", "css?sourceMap", "sass?sourceMap" ]
      }
    ],
  }
};

这是我的main.js文件：

import React from "react";
import ReactDOM from "react-dom";

// CSS
import "./styles/main.scss"

let docBody = "Webpack is doing its thing, with ES2015!!";
document.write(docBody);

知道我在这里做错了吗？

使用webpack-dev-server和Hot Module Replacement不更新bundle.js以及对JS或SCSS文件的更改

0 个答案: