Отказался выполнять скрипт из bundle.js, потому что его MIME-тип

Question

Здравствуйте, я новичок в реагировании, и я пытаюсь прикрепить экспресс-фреймворк с реакцией, я следовал этому руководству: 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 включен.

Я искал эту ошибку в течение двух дней и не нашел решения. Я думаю, что проблема заключается в том, что bundle.js не создается веб-пакетом, я хотел бы узнать, почему это происходит

Мой каталог проектов выглядит следующим образом:

Файл моего конфигурационного веб-пакета:

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, где я создаю экспресс-экземпляр:

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. Он сохраняет большую часть вашей другой логики, не перемещая много кода. Замыкания полезны для такого рода вещей, сохраняя логику там, где она есть, и в то же время позволяя другим позволить вам подключиться к их логике.