即使在显示捆绑有效消息后，Webpack-dev-server 也不捆绑 [英] Webpack-dev-server not bundling even after showing bundle valid message

问题描述

我已经使用 webpack 设置了一个基本的 React 应用程序，但是我无法让 webpack-dev-server 正常运行.

I've set up a basic react application with webpack but I couldn't get the webpack-dev-server running properly.

我已经全局安装了 webpack-dev-server 并尝试运行命令 sudo webpack-dev-server --hot 因为需要热重新加载.

I've installed webpack-dev-server globally and tried running the command sudo webpack-dev-server --hot as hot reloading was required.

该项目似乎仅使用 webpack cmd 就可以正常工作.它内置到我的构建文件夹中，我可以通过某些服务器使其工作，但它不适用于 webpack-dev-server.从终端可以清楚地看出构建过程已经完成，没有抛出错误 [webpack: bundle is now VALID.] 并且它实际上正在正确观察，因为在任何更改时它都会触发构建过程，但它不会'并没有真正构建[它不为我的 bundle.js 服务].我尝试更改整个配置，但仍然无法解决问题.

The project seems to be working fine with just webpack cmd. It builds into my build folder and I can get it working via some server but it wont work with webpack-dev-server. From terminal its clear that the build process has completed with no error being thrown [webpack: bundle is now VALID.] and its in fact watching properly because on any change it does trigger the build process but it doesn't really gets built [it doesn't serve my bundle.js]. I tried changing the entire config and still couldn't get the issue resolved.

如果有人能提供帮助，我们将不胜感激.

It would be much appreciated if someone can help.

以下是我的 webpack.config.js 文件.

Following is my webpack.config.js file.

var path = require('path');

module.exports = {
    devtool: '#inline-source-map"',

    watch: true,
    colors: true,
    progress: true,

    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /\.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /\.scss$/
        }]
    },

    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'),
        publicPath: '/build/',
        filename: '[name].js'
    },
    entry: {
        bundle: [
            './src/index.js'
        ]
    },

    devServer: {
        contentBase: "./",
        inline: true,
        port: 8080
    },
};

推荐答案

我自己解决了这个问题.听起来很傻，但问题出在 output 对象下的 publicPath 上.它应该匹配 path 属性而不是 /build/，即

I've got the issue resolved by myself. Silly as it sounds but the issue was with the publicPath under the output object. It should match the path property instead of just /build/, i.e.,

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},

这篇关于即使在显示捆绑有效消息后，Webpack-dev-server 也不捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！