你好我'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创建的,我现在想为什么会这样
我的项目目录如下:
我的配置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 回答
试试这个:
具体来说,这样做是双重的:
它将您的初始化打到最后,Express最终读取
/dist
和/
的全部捕获路径 . 如果您之后添加中间件,您将永远不会看到它设置 .它保留了大部分其他逻辑,而无需移动大量代码 . 闭包对于那种事情是有用的,保持它所属的逻辑,同时仍允许其他人让你挂钩他们的逻辑 .