Комплект веб-пакетов, обслуживаемый экспресс-сервером - не удается найти пакет

Привет, это мой экспресс-сервер, который я пытаюсь настроить для использования с webpack.Комплект веб-пакетов, обслуживаемый экспресс-сервером - не удается найти пакет

const Server = require('./server.js') 
const path = require('path') 
const port = (process.env.PORT || 3001) 
const app = Server.app() 

if (process.env.NODE_ENV !== 'production') { 
    const webpack = require('webpack') 
    const webpackDevMiddleware = require('webpack-dev-middleware') 
    const webpackHotMiddleware = require('webpack-hot-middleware') 
    const config = require('./webpack.config.js') 
    const compiler = webpack(config) 

    app.use(webpackHotMiddleware(compiler)) 
    app.use(webpackDevMiddleware(compiler, { 
    noInfo: true, 
    publicPath: path.join(__dirname, '/build') 
    })) 
} 

app.listen(port) 
    console.log(`Listening at http://localhost:${port}`)

./app.js

const path = require('path') 
const express = require('express') 

module.exports = { 
    app: function() { 
    const app = express(); 
    const indexPath = path.join(__dirname, '/build/index.html'); 
    const publicPath = express.static(path.join(__dirname, '/build')); 

    app.use('/build', publicPath); 
    app.get('/', function (_, res) { res.sendFile(indexPath) }); 

    return app; 
    } 
}

./server.js

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, '/build'); 

var config = { 
    entry: path.resolve(__dirname,'app/main.js'), 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js', 
    publicPath: '/build/' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react']}}, 
     { test: /\.sass$/, loaders: ['style', 'css', 'sass'] }, 
     { test: /\.css$/, loader: "style!css" }, 
     { test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000" }, 
     { test: /\.svg$/, loader: 'babel!svg-react' } 
    ] 
    } 
}; 

module.exports = config;

./webpack.config.js

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>test</title> 
    </head> 
    <body> 
    <div id="app"> 
     <script type="text/javascript" src="bundle.js"></script> 
    </div> 
    </body> 
</html>

./build/index.html

Когда я бег node app.js он находит index.html страницу но я получаю сообщение об ошибке 404 «не могу найти bundle.js» Я уверен, что где-то им-указывающий на ту директорию, но я не могу работать!

источник

2017-02-13 Jordan Bartholomew-Harrison

Где вы храните свой 'bundle.js' ?. Это внутри вашего BUILD_DIR (или) где-то еще? –

Предполагается, что пакет bundle.js будет выводиться webpack в BUILD_DIR (./build). –

В этом случае в вашем объявлении 'var config' ваше' имя_файла' должно быть изменено как 'filename:../Bundle.js ',' правильно? –

Когда вы обслуживаете build/index.html на /, он ищет файл /bundle.js (каталог, из которого вы запускаете свой сервер), чего явно не существует. С вашей конфигурацией Webpack вы создадите файл /build/bundle.js, если вы запустили Webpack.

Теперь здесь находится webpack-dev-middleware. Вместо того, чтобы создавать этот файл, он обслуживает пачку из памяти всякий раз, когда попадает соответствующий путь. Все, что вам нужно сделать, это сказать, что промежуточное программное обеспечение, которое вы хотите передать в комплекте на /, установив publicPath в ./app.js.

app.use(webpackDevMiddleware(compiler, { 
    noInfo: true, 
    publicPath: '/' 
}))

Вам также не нужно ничего обслуживать на /build. Но если вы хотите использовать его для тестирования встроенного пакета из вашей фактической файловой системы, вам нужно будет запустить Webpack для создания этого пакета. Для того, чтобы правильно работать, вы должны исправить ваши BUILD_DIR чтобы:

var BUILD_DIR = path.resolve(__dirname, './build');

Причина заключается в том, что path.resolve лечит /build как абсолютный путь и не добавить его в текущий каталог. Который также выдал бы отклоненную разрешенную ошибку, если вы не запустили ее как root. Для получения дополнительной информации см .: https://nodejs.org/docs/latest/api/path.html#path_path_resolve_paths

источник

2017-02-13 23:04:33

Вы знаете что-нибудь о вложенных маршрутах? У меня почти такая же настройка, но когда я пытаюсь нанести что-то вроде: '/ test' Node либо не может найти index.html, либо 'Can not GET/test'.Я использую React/browserHistory в интерфейсе – user2465134

@ user2465134 Для этих маршрутов вам нужно обслуживать '/ index.html', например, обслуживая его, когда никакой другой маршрут не был сопоставлен. Но вы должны убедиться, что вы случайно не используете его вместо своего JavaScript или каких-либо активов. Это называется отказом API истории и существуют плагины/промежуточное программное обеспечение, которые могут справиться с этим для вас. –

Майкл, не могли бы вы посмотреть мой пост здесь? https://stackoverflow.com/questions/47259027/dev-mode-for-node-webpack-dev-server-react-no-such-file-or-directory-for-nes/47259971#47259971. Он показывает мою настройку и может дать вам немного больше контекста. – user2465134

Комплект веб-пакетов, обслуживаемый экспресс-сервером - не удается найти пакет

ответ

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