即使在显示捆绑有效消息后,Webpack-dev-server 也不捆绑

IT技术 javascript node.js reactjs webpack webpack-dev-server
2021-05-10 11:16:02

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

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

该项目似乎仅使用webpackcmd就可以正常工作它内置到我的构建文件夹中,我可以通过某些服务器使其工作,但它无法与webpack-dev-server. 从终端可以清楚地看出,构建过程已经完成,没有抛出错误 [ webpack: bundle is now VALID.] 并且它实际上正在正确观察,因为在任何更改时它都会触发构建过程,但它并没有真正被构建 [它不为我的包提供服务。 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
    },
};
4个回答

我自己解决了这个问题。听起来很傻,但问题出publicPathoutput物体下面。它应该匹配path属性而不是仅仅匹配/build/,即,

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

就我而言,我必须检查 webpack 在哪里提供文件。

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

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

之后我/dist/bundle.js在我的 index.html 中使用了它<script src="/dist/bundle.js"></script>

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

webpack-dev-server 从内存中提供你的 bundle.js。当您运行它时,它不会生成该文件。因此 bundle.js 在这种情况下不作为文件存在。

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

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

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

文档