javascript - 拒绝从 bundle.js 执行脚本,因为它的 MIME 类型
问题描述
你好,我是新来的反应,我正在尝试用反应附加快速框架,我遵循了这个教程:https ://blog.hellojs.org/setting-up-your-react-es6-development-environment-with- webpack-express-and-babel-e2a53994ade但是当我运行服务器时出现以下错误:
加载资源失败:服务器响应状态为 404 (Not Found) 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}`)
解决方案
尝试这个:
// 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
and/
。如果您在之后添加中间件,您将永远看不到它一开始就设置好了。它保留了您的大部分其他逻辑,而无需移动大量代码。闭包对这类事情很有用,它可以将逻辑保留在它所属的位置,同时仍然允许其他人让你进入他们的逻辑。
推荐阅读
- scala - 如何在 O(n) 时间内使用不可变集合同时保留匹配和不匹配的部分
- macos - 在 MacOS 上的另一个屏幕上打开弹出菜单
- c++ - istringstream 和读取浮点数的 C++ 问题
- git - 取消设置/忘记/替换用户 git Credential.Helper 并记住新用户
- javascript - 无法通过 Javascript 从 JSON 中获取值
- java - Java类方法中没有计算公式
- android - 从内部班凌空返回
- python - 两个 URI 的 URL 连接
- python - Python过滤条件行
- node.js - 我无法将 Angular/Cli 安装到我的 ubuntu 18 系统上