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

回答

相关问题