webpack + express.js не загружается bundle.js

Я смотрю, как создать приложение с узлом + express js в качестве backend и реагировать + webpack как переднюю часть, но я все еще получаю ошибки и bundle.js не загружается. Вот как выглядят мои папки: в корневом каталоге у меня есть папка node_modules, src, в которой содержатся подкаталог main.js и compoenents, package.json и wepback config.js. Это как моя корневая папка выглядит следующим образом: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 render webpack, который компилирует основные js в bundle 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, 
    ... 
});

Наконец, убедитесь, что URL в вашем HTML указывает на правильный URL :

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

источник

2016-09-18 13:56:37 robertklep

Спасибо, чувак, ты мне очень помог, когда никто не мог !!! –

webpack + express.js не загружается bundle.js

ответ

Смежные вопросы