webpack-dev-server 没有更新 "out of context" 的文件

Question

我运行有点疯狂，试图让 webpack-dev-server 在 Windows 10 开发机器上正常工作。

我有一个非常简单的 React 应用程序。目录结构如下所示：

package.json
webpack.config.js

+ src\
  main.jsx
  favicon.ico
  indexTempl.html

+ src\
      + components\
        homePage.jsx  

+ src\
      + components\
                   + about\
                     aboutPage.jsx

+ src\
      + components\
                   + common\
                     header.jsx

+ src\
      + images\
        logo.png

如您所见：一个非常简单的 React 应用程序。

我的package.json:

{
  "name": "react-flux",
  "version": "0.0.1",
  "description": "react-flux",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --inline --hot"
  },
  "author": "perot",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "copy-webpack-plugin": "^3.0.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.19.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "jquery": "^2.2.4",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

我的webpack.config.js:

var CopyWebpackPlugin = require("copy-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  context: __dirname + "/src",

  entry: {
    javascript: "./main.jsx"
  },

  plugins: [
    new CopyWebpackPlugin([{ from: "images/*" }]),
    new HtmlWebpackPlugin({
      hash: true,
      filename: "./index.html",
      template: "./indexTempl.html"
    })
  ],

  output: {
    filename: "app.js",
    path: "./dist"
  },

  resolve: {
    extensions: ["", ".js", ".jsx"]
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel?presets[]=es2015,presets[]=react,presets[]=react-hmre"]
      }
    ]
  }
};

现在的问题：

当我编辑 indexTempl.html 时，webpack 意识到更改并开始重新捆绑。现在，当我在浏览器中刷新我的网页时，可以看到更改。到目前为止没问题。

但是当我编辑 homePage.jsx 时，webpack 没有收到有关更改的通知 - 当我在浏览器中刷新页面时没有任何变化。

我已经阅读了无数的帖子和论坛 - 没有任何帮助。

现在我做了一个有趣的观察：

当我删除 webpack.config.js 中的一行时，它正在工作 - 但不是我喜欢的方式。

正在删除行

context: __dirname + "/src",

现在在我的配置的每个路径中放置一个 src/ 就可以解决问题。

但这很丑陋：现在我不得不写 "http://localhost:8080/src/" 而不是 "http://localhost:8080"，而且有些链接被破坏了。

但是：webpack-dev-server 似乎只监视 context 节点下的文件系统，所以如果 context 是 "./src"，文件夹 "./dist" (这是 not "./src") 的子文件夹未被观看。

有人知道我的配置有什么问题吗？

Answer 1

找到解决办法。问题是：像 __dirname + "/directory" 这样的组合路径不起作用（有人知道为什么吗？）。相反，我必须使用 Path.resolve(__dirname, "directory").

这是我的工作配置：

var CopyWebpackPlugin = require("copy-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var Path = require("path");

module.exports = {
    // !!!! use Path.resolve(...) !!!!
    context: Path.resolve(__dirname, "src"),

    entry: {
        javascript: "./main.jsx"
    },

    plugins: [
        new CopyWebpackPlugin([{ from: "images/*" }]),
        new HtmlWebpackPlugin({
            hash: true,
            filename: "./index.html",
            template: "./indexTempl.html"
        })
    ],

    output: {
        filename: "app.js",

        // !!!! use Path.resolve(...) !!!!
        path: Path.resolve(__dirname, "dist")
    },

    resolve: {
        extensions: ["", ".js", ".jsx"]
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ["babel?presets[]=es2015,presets[]=react,presets[]=react-hmre"]
            }
        ]
    }
};

我刚刚将 context: __dirname + "/src" 替换为 context: Path.resolve(__dirname, "src")，将 path: __dirname + "/dist" 替换为 path: Path.resolve(__dirname, "dist")，这样就可以了。

webpack-dev-server 没有更新 "out of context" 的文件

webpack-dev-server not updating file which is "out of context"

javascript

reactjs

webpack

webpack-dev-server