webpack + express.js不加載bundle.js

我想要創建一個應用程序與節點+表達js作爲後端和反應+ webpack作爲前端，但我仍然收到錯誤和bundle.js不加載。這就是我的文件夾的樣子：在根目錄中，我有包含main.js和compoenents子文件夾，package.json和wepback config.js的node_modules，src文件夾。這是我的根文件夾的樣子：webpack + express.js不加載bundle.js

//// webpack.config.js

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: './src', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     port: 3000, 
     inline: true 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['react','es2015'] 
      } 
     }] 
    } 
};

//server.js

const express = require('express'); 
    const webpack = require('webpack'); 
    const config = require('./webpack.config.js'); 
    const webpackMiddleware = require("webpack-dev-middleware"); 
    const app = express(); 
    const compiler = webpack(config); 

    const PORT = 3000 || process.env.port; 

    app.use(webpackMiddleware(compiler, { 
     noInfo: false, 
     quiet: false, 
     lazy: true, 
     watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
     }, 
     publicPath: "/assets/", 
     index: "index.html", 
     headers: { "X-Custom-Header": "yes" }, 
     stats: { 
      colors: true 
     } 
     reporter: null, 
     serverSideRender: false, 
    })); 

    app.get('/', (req, res) => { 
     res.sendFile(__dirname + '/src/index.html'); 

}); 

app.listen(PORT)

///指數.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>React</title> 
</head> 
<body> 
<div id="app"></div> 
</body> 
<script src='bundle.js'></script> 
<script src="https://cdn.socket.io/socket.io-1.4.8.js"></script> 
</html>

///main.js

import App from './components/App'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(<App />, document.getElementById('app'))

///控制檯錯誤

reporter: null, 
^^^^^^^^ 

SyntaxError: Unexpected identifier 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:373:25) 
    at Object.Module._extensions..js (module.js:416:10) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Function.Module.runMain (module.js:441:10) 
    at startup (node.js:139:18) 
    at node.js:968:3

所有我需要的是讓表現與反應和工作的WebPack，我有點新的WebPack ..

來源

2016-09-18 Razvan Alex

這與Webpack無關，但是用簡單的m發出逗號。該錯誤告訴你在哪裏看。 – robertklep

你爲什麼這麼說？我正在使用webpack的反應方..只是想讓快遞js渲染webpack編譯主js到捆綁js –

我在說，你得到的錯誤是不相關的Webpack，在'服務器中的代碼。 js'有語法錯誤。錯誤消息告訴你在哪裏。 – robertklep

中間件配置使用/assets/作爲publicPath，但是您沒有在Webpack配置中設置公共路徑。

我建議設置publicPath在webpack.config.js：

const path = require('path'); 
... 

output: { 
    path  : path.resolve('./src'), // always use absolute paths 
    filename : 'bundle.js', 
    publicPath : '/assets/' 
}

和再利用其中間件配置值：

app.use(webpackMiddleware(compiler, { 
    publicPath : config.output.publicPath, 
    ... 
});

最後，確保你的HTML網址指向正確的URL ：

<script src='/assets/bundle.js'></script>

來源

2016-09-18 13:56:37 robertklep

謝謝老兄，你幫了我很多，當沒有人可以！ –

webpack + express.js不加載bundle.js

回答

相關問題