使用 React 调试 webpack 配置

Question

每次尝试启动我的应用程序时，我都会遇到运行几个错误。我真的很想帮助调试这个。

这些是我的错误::

拒绝执行来自“http://127.0.0.1:8080/scripts/bundle.js”的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

GET http://127.0.0.1:8080/scripts/bundle.js net::ERR_ABORTED 404（未找到）

这是我的 webpack 配置文件：

var path = require('path');

module.exports = [
    {
      entry: './assets/stylesheets/app.scss',
      output: {
        // This is necessary for webpack to compile
        // But we never use style-bundle.js
        path: path.join(__dirname, 'public/scripts'),
        filename: 'style-bundle.js',
      },      
      devServer: {
        contentBase: "./public",
        hot: true
      },
      module: {
        rules: [{
          test: /\.scss$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'bundle.css',
              },
            },
            { loader: 'extract-loader' },
            { loader: 'css-loader' },
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['./node_modules'],
              }
            },
          ]
        }]
      },
    },
    {
      entry: "./src/app.js",
      output: {
        path: path.join(__dirname, 'public/scripts'),
        filename: "bundle.js"
      },
      devServer: {
        contentBase: "./public",
        hot: true
      },
      module: {
        loaders: [{
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['env','react']
          }
        }]
      },
    }
  ];

我有什么遗漏的吗？？？？

Answer 1

我可以用不同的配置模拟相同的 404 错误。长话短说：

你运行 webpack-dev-server 了吗？
你的package.json还好吗？
相关的html文件(index.html)可以吗？注意脚本标签 bundle.js 和路径
使用位于 webpack.config.js
module.exports - 你只需要一次 devServer。

示例：开发服务器：{ contentBase: path.join(__dirname, 'public/scripts'), 热：真实 },

contentBase 必须有这样的完整路径。

使用 React 调试 webpack 配置

debugging webpack config with react

javascript

webpack

webpack-dev-server