即使在显示捆绑有效消息

时间:2016-03-22 09:22:36

标签: javascript node.js reactjs webpack webpack-dev-server

我已经使用webpack设置了一个基本的反应应用程序,但我无法正常运行webpack-dev-server

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

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

如果有人可以提供帮助,我将不胜感激。

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

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
    },
};

6 个答案:

答案 0 :(得分:40)

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

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

答案 1 :(得分:21)

在我的情况下,我必须检查webpack在哪里提供文件。

你可以看到它: http://localhost:8080/webpack-dev-server

然后我可以看到我的bundle.js路径> http://localhost:8080/dist/bundle.js

之后我在index.html /dist/bundle.js

中使用了<script src="/dist/bundle.js"></script>

现在它会刷新任何文件更改。

答案 2 :(得分:9)

webpack-dev-server从内存中提供你的bundle.js。它在运行时不会生成文件。因此,在此方案中,bundle.js不作为文件存在。

如果您不想使用bundle.js,例如优化它的大小或测试您的生产部署,请使用webpack命令使用webpack生成它并在生产模式下提供它。

答案 3 :(得分:1)

顺便说一句,从 Webpack v4 开始,可以将内存中的资产写入磁盘:

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

doc

答案 4 :(得分:0)

Dev-server将编译后的文件保存在内存中,我无法直接访问它... 但!解决方案是您无需访问它,在开发中(即使在节点服务器或localhost上运行项目时)也可以使用localhost:8080访问您的页面,这就是webpack-dev-server为您的页面提供服务的位置可以感受到使用它的所有优势(实时重新加载!),但是!它不会编译您的bundle.js,所以!在生产之前,您需要手动运行webpack build命令,仅此而已!开发服务器无法编译bundle.js文件!祝你好运!

答案 5 :(得分:0)

就我而言,我使用的是VS Code,因此必须重新启动它。我注意到vs代码有时会出错。您在配置文件(package.json,webpack.config.js等)中所做的更改有时不会生效。因此,如果遇到即使正确设置也无法解决问题的情况,只需重新启动vs代码即可。

我看不到与此相关的任何错误报告。所以这很奇怪。我认为如果多次构建项目后再更改配置文件之一,就会触发此错误。

如果这实际上是正在发生的事情,则它是一个巨大的错误。我将尝试切换到Visual Studio而不是Code,看看是否仍然发生。如果这样做,则可能是webpack的问题。