javascript - webpack-dev-server 不会自动重新加载和构建 - 配置问题

Question

我在我的项目中使用:

"webpack": "2.2.1",
"webpack-dev-server": "2.4.2"

当文件更改时，我需要使用 webpack-dev-server 实时重新加载来构建一个应用程序。

在我的 package.json 中我有这样的设置:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
},

目前我可以通过运行以下命令来手动构建应用程序: webpack 并且我能够使用 npm start 初始化开发者服务器。

我面临的问题是，在 npm start 和本地服务器运行后，如果我对 JS 文件进行一些更改，应用程序不会被重建，页面也不会自动刷新。目前，我需要始终在控制台中手动重新运行 webpack。

我在控制台中没有收到任何错误，因此我认为这是一个错误的配置问题。

您能指出我的设置有什么问题吗？

---

// file: webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

Answer 1

webpack-dev-server 从内存中提供文件。

来自readme :

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

因此它不会将任何文件写入磁盘，并且在文件系统上不存在文件的情况下它也可以工作。当您删除 build 目录并启动开发服务器而不运行 webpack 时，它应该仍然可以工作。如果没有，您就不会访问开发服务器提供的路径，而是使用文件系统中的文件。

您使用的 index.html 可能位于 build 目录之外，因此您可以像这样包含该包:

<script src="build/app.bundle.js"></script>

您正在服务器上请求 /build/app.bundle.js，但 webpack-dev-server 只会提供 /app.bundle。 js (因为这是您配置的文件名)。要解决此问题，您可以配置 output.publicPath :

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
    publicPath: '/build/'
},

这将影响包含 Assets 的加载器。如果你不想这样，你可以设置 devServer.publicPath相反，但建议保持它们相同。