首页 文章

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

提问于
浏览
0

你好我'm new to react and I'我试图附加快速框架与反应,我按照本教程: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不是由webpack创建的,我现在想为什么会这样

我的项目目录如下:

root

我的配置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}`)

1 回答

  • 0

    试试这个:

    // 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}`)
    

    具体来说,这样做是双重的:

    • 它将您的初始化打到最后,Express最终读取 /dist/ 的全部捕获路径 . 如果您之后添加中间件,您将永远不会看到它设置 .

    • 它保留了大部分其他逻辑,而无需移动大量代码 . 闭包对于那种事情是有用的,保持它所属的逻辑,同时仍允许其他人让你挂钩他们的逻辑 .

相关问题