webpack-dev-server 没有更新“脱离上下文”的文件

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"（这是不是 "./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")，这样就可以了。