Anu*_*ena 5 express webpack webpack-dev-server webpack-dev-middleware
首先，我在这里找到了许多类似的主题，但即使参考了它们，我仍然无法让它工作。
所以，我的问题只是Cannot GET /我localhost:3000在运行我的快速服务器（使用npm run serve）后访问时进入了 Chrome 。不是找不到bundle.js文件；它根本找不到index.html。
当我npm run serve在 package.json 文件中运行脚本时，我在服务器控制台上没有看到任何错误。Webpack 构建（从 Webpack-dev-middleware 调用）日志也没有显示错误。
如果我直接从终端运行 webpack-dev-server 并访问相同的 URL，它可以正常工作。（我已经覆盖了主机和端口，以配合我使用的Express服务器，通过者devServer中选择webpack.config.js。）
我究竟做错了什么？
文件夹结构
/client
/main.js
/dist
/index.html
/assets/
/server
/server.js
/webpack.config.js
/package.json
webpack.config.js
const path = require('path');
module.exports = {
entry: './client/main.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'bundle.js',
publicPath: '/assets/'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
},
{
use: ['style-loader', 'css-loader', 'sass-loader'],
test: /\.scss$/
}
]
},
devServer: {
host: 'localhost',
port: 3000,
historyApiFallback: true,
contentBase: path.resolve(__dirname, 'dist'),
}
};
/dist/index.html
<!DOCTYPE html>
<html>
<head>
<title>Webpack-Dev-Middleware Test</title>
</head>
<body>
<div id="app-container">
</div>
<script src="/assets/bundle.js"></script>
</body>
</html>
/服务器/server.js
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
if (process.env.NODE_ENV !== 'production') {
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var config = require('./../webpack.config');
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath : config.output.publicPath,
}));
} else {
app.use(express.static(path.resolve(__dirname + '/../dist/')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname + '/../dist/index.html'));
});
}
app.listen(port, () => console.log('Started on port:', port));
问题是你并没有真正index.html在 webpack 块中的任何地方提供服务。你应该使用插件，例如html-webpack-loader在内存上提供它，或者使用express的静态函数，我认为更理想的（更多webpack方式）解决方案是前一种。
下面是使用的示例html-webpack-loader。
(as one of the plugins in webpack config.)
new HtmlWebpackPlugin({
filename: 'index.html',
template: './dist/index.html',
title: 'Your website'
})
| 归档时间： |
|
| 查看次数： |
2511 次 |
| 最近记录： |