拒绝从 bundle.js 执行脚本，因为它的 MIME 类型

Question

您好，我是 react 新手，我正在尝试使用 react 附加 express 框架，我按照本教程进行操作：https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade 但是当我运行服务器时出现以下错误：

加载资源失败：服务器响应状态为 404 (未找到) localhost/:1

拒绝执行脚本 'http://localhost:3000/dist/bundle.js' 因为它的 MIME 类型 ('text/html') 不可执行，严格的 MIME 类型检查是 已启用。

我已经搜索这个错误两天了，我还没有找到解决方案。我认为问题在于 webpack 没有创建 bundle.js，我现在想知道为什么会发生这种情况

我的项目目录如下：

我的配置 webpack 文件：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './client/index.js',
    output: {
      path: __dirname,
      filename: 'bundle.js',
      publicPath: '/client/assets/'
    },
    module: {
        loaders: [
          {
            test: /\.(js|jsx)$/,
              loader: 'babel-loader',
              include: path.join(__dirname, 'client'),
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react', 'stage-0']
              }
            },
            {
              test: /\.css$/,
              loader: 'css-loader'
            }
        ]
    },
};

server.js，我在其中创建 express 实例：

const path = require('path')
const express = require('express')

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, 'indexDep.html');
    const publicPath = express.static(path.join(__dirname, '../dist'));

    app.use('/dist', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

还有 app.js，我在其中运行服务器：

const Server = require('./server.js')
const port = (process.env.PORT || 3000)
const app = Server.app()

if (process.env.NODE_ENV !== 'production') {
  const webpack = require('webpack')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const config = require('../webpack.dev.config.js')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler))
  app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPathdist
  }))
}

app.listen(port)
console.log(`Listening at http://localhost:${port}`)

Answer 1

试试这个：

// server.js
"use strict"

const path = require('path')
const express = require('express')

module.exports = {
  app(init) {
    const app = express()
    const indexPath = path.join(__dirname, 'indexDep.html')
    const publicPath = express.static(path.join(__dirname, '../dist'))

    if (init != null) init(app)
    app.use('/dist', publicPath)
    app.get('/', function (_, res) { res.sendFile(indexPath) })

    return app
  },
}

// app.js
const Server = require('./server.js')
const port = (process.env.PORT || 3000)

Server.app(app => {
  if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack')
    const webpackDevMiddleware = require('webpack-dev-middleware')
    const webpackHotMiddleware = require('webpack-hot-middleware')
    const config = require('../webpack.dev.config.js')
    const compiler = webpack(config)

    app.use(webpackHotMiddleware(compiler))
    app.use(webpackDevMiddleware(compiler, {
      noInfo: true,
      publicPath: config.output.publicPathdist
    }))
  }
})
.listen(port)
console.log(`Listening at http://localhost:${port}`)

具体来说，这样做有两个方面：

1. 在 Express 最终读取 /dist 和 / 的全部路由之前，它会将您的初始化设置为。如果你在之后添加中间件，你一开始就看不到它的设置。

2. 它保留了大部分其他逻辑，而无需移动大量代码。闭包对这种事情很有用，它可以将逻辑保留在它所属的位置，同时仍然允许其他人让你进入他们的逻辑。