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

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

该项目似乎在webpack cmd的情况下运行良好.它内置到我的build文件夹中,我可以通过一些服务器让它工作,但它不能与webpack-dev-server一起工作.从终端可以清楚地看到,构建过程已经完成,没有抛出错误[webpack: bundle is now VALID.],事实上,它正在正确地观察,因为任何更改都会触发构建过程,但它并没有真正得到构建[it's not service my bundle.js].我试图更改整个配置,但仍然无法解决问题.

如果有人能帮忙,我们将不胜感激.

以下是我的网页.配置.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
    },
};

推荐答案

我自己解决了这个问题.虽然听起来很傻,但问题在于output物体下的publicPath.它应该匹配path属性,而不是/build/属性,即.,

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

Reactjs相关问答推荐

如何在useEffect中使用useParams()

呈现组件元素(MAP)中的问题

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

有没有办法将MUI网格元素与Flex-Start对齐?

如何访问子集合中的文档?

如何通过回调函数获取多个值?

当useEffect和onClick处理程序都调用useCallback函数时,有没有办法对useEffect产生额外的影响?

将 useRef 与 useImperativeHandle 一起使用时,React 不会重新渲染

如何优化 React 应用程序的性能?

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播?

CORS策略:对预检请求的响应未通过访问控制判断:没有Access-Control-Allow-Origin

如何在 ReactJS 中提交后删除 URL 中的查询参数

将 useState 设置为组件内部的值

Cypress 组件测试不渲染react 组件(但它的内容)

在 React 中将路径与查询变量匹配

当从数组中删除数据时,UseEffect 不会重新渲染,仅在添加数据时才会重新渲染

如何通过 Material ui select 使下拉菜单下拉

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

如何在 JSX 中使用 -webkit- 前缀?