1
まず最初に、私はここで多くの似たような話題を見つけましたが、それらを参照した後でさえ、私はまだそれを動作させることができませんでした。webpack-devミドルウェアの設定でGET /エラーが発生しません
私の問題は、エクスプレスサーバー（npm run serveを使用）を実行した後にlocalhost:3000にアクセスしたときにクロムにCannot GET /が表示されてしまうことです。 bundle.jsファイルが見つからないわけではありません。それは単にindex.htmlを見つけることができません。
npm run serveスクリプトをpackage.jsonファイルに実行すると、サーバーコンソールにエラーは表示されません。 Webpackビルド（Webpack-devミドルウェアから呼び出された）ログにもエラーは表示されません。
端末から直接webpack-dev-serverを実行して、同じURLにアクセスすると正しく動作します。 （ホストサーバーとポートをdevServerのオプションを使ってエクスプレスサーバーで使用するホストと一致するようにオーバーライドしました。
私は間違っていますか？
フォルダ構造
/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/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));
「npm run serve」のスクリプトは何ですか？ –
@LeeHanKyeol 'nodemon server/server.js' –
そして、あなたは'開発 '（生産環境ではない）環境について話していますか？ –