2017-10-08 12 views
1

Webpackを使用してMERNスタックプロジェクトをセットアップする方法を学びます。 webpackを実行してすべてをバンドルし、エクスプレスサーバを起動した後、bundle.jsが見つからないことがわかり、コンソールにlocalhost:3000/bundle.js 404ステータスコードが表示されます。たぶん私のパスが間違っているか、私はwebpackでbundle.jsが見つかりません

{ 
    "presets":[ 
     "es2015", "react" 
    ] 
} 

server.js

.babelrc

Package.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 

答えて

1

app.use(express.static('dist')) 
+0

おかげであなたのserver.jsに以下を追加し、私はルートを追加してください –

+0

「/取得することはできません」というエラーを取得し、今それを試してみました。 app.get( '/'、function(request、response){ response.sendFile(path.resolve(__ dirname、 'static'、 'index.html')) } –

+0

ありがとうございました!私のインデックスのbundle.jsへの不正なパスを修正するとともに、静的ではなく「dist」を使用しました。 –

関連する問題