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"（即 <{1}}的子文件夹未被观看。

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

Answer 1

找到解决方案。问题是：结合像__dirname + "/directory"这样的pathes不起作用（任何人都知道为什么？）。相反，我必须使用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不更新文件，这是＆＃34;脱离上下文＆＃34;

1 个答案: