1
Webpackを使用してMERNスタックプロジェクトをセットアップする方法を学びます。 webpackを実行してすべてをバンドルし、エクスプレスサーバを起動した後、bundle.jsが見つからないことがわかり、コンソールにlocalhost:3000/bundle.js 404ステータスコードが表示されます。たぶん私のパスが間違っているか、私はwebpackでbundle.jsが見つかりません
{
"presets":[
"es2015", "react"
]
}
server.js
.babelrcPackage.json
{
"name": "mern_tut",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"express": "^4.16.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"webpack": "^3.6.0"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './static/app.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
]
}
}
何かが欠けています
var express = require('express')
var app = express();
app.use(express.static('static'));
var server = app.listen(3000, function() {
var port = server.address().port;
console.log("Started server at port", port);
});
あなたがここにあなたのbundle.jsにサービスを提供していないプロジェクトのセットアップ
- dist
-bundle.js
- node_modules
- static
-app.js
-index.html
- .babelrc
- package.json
- server.js
- webpack.config.js
おかげであなたのserver.jsに以下を追加し、私はルートを追加してください –
「/取得することはできません」というエラーを取得し、今それを試してみました。 app.get( '/'、function(request、response){ response.sendFile(path.resolve(__ dirname、 'static'、 'index.html')) } –
ありがとうございました!私のインデックスのbundle.jsへの不正なパスを修正するとともに、静的ではなく「dist」を使用しました。 –