使用 react 调试 webpack 配置答案

【问题标题】：debugging webpack config with react使用 react 调试 webpack 配置
【发布时间】：2019-02-23 15:01:55
【问题描述】：

每次我尝试启动我的应用程序时都会遇到几个错误。我真的很想得到一些帮助来调试它。

这些是我的错误::

拒绝执行来自 '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']
          }
        }]
      },
    }
  ];

我有什么遗漏吗？？？？

【问题讨论】：

您是否有多个服务器进程同时运行？如果是这样，请终止进程并仅启动一次。

标签： javascript webpack webpack-dev-server

【解决方案1】：

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

你运行 webpack-dev-server 了吗？
你的 package.json 好吗？
相关的html文件（index.html）可以吗？注意带有 bundle.js 和路径的 script 标签
在 webpack.config.js 中使用 devServer 检查并修复 contentBase
module.exports - 你只需要一次 devServer。

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

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

【讨论】：