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：

它使用了webpack-dev-middleware，可以快速内存中访问webpack资产。

因此它不会将任何文件写入磁盘，并且它也可以在文件系统上没有文件的情况下运行。当您删除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/'
},

这将影响包含资产的加载器。如果您不想要，可以设置devServer.publicPath，但建议保持相同。

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

1 个答案: