Хостинг веб-приложений в комплекте с веб-пакетом

Question

Я создал веб-приложение поверх ReduxSimpleStarter Stephen Grider, шаблона реакции-сокращения. Он использует Webpack для комплектации. Теперь я хочу разместить свое приложение на firebase. Когда я это делаю, комплект не работает, и я остаюсь простым index.html.

Может кто-нибудь объяснить, как я запускаю пакет Webpack для приложения, которое не локально размещено?

Эти файлы могут быть релевантными, хотя я не уверен.

//package.json 
{ 
     "name": "testapp", 
     "version": "0.0.0", 
     "description": "testapp", 
     "main": "index.js", 
     "scripts": { 
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js" 
     }, 
     "author": "", 
     "license": "ISC", 
     "devDependencies": { 
     "babel-core": "^6.2.1", 
     "babel-loader": "^6.2.0", 
     "babel-preset-es2015": "^6.1.18", 
     "babel-preset-react": "^6.1.18", 
     "webpack": "^1.12.9", 
     "webpack-dev-server": "^1.14.0" 
     }, 
     "dependencies": { 
     "axios": "^0.9.1", 
     "babel-preset-stage-1": "^6.1.18", 
     "jquery": "^2.2.0", 
     "lodash": "^3.10.1", 
     "material-ui": "^0.14.4", 
     "react": "^0.14.3", 
     "react-dom": "^0.14.3", 
     "react-redux": "^4.0.0", 
     "react-tap-event-plugin": "^0.2.2", 
     "redux": "^3.0.4", 
     "redux-promise": "^0.5.1" 
     } 
    } 

.

//webpack.config 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

Answer 1

Я нашел решение. Включите "webpack": "^1.12.9" в объект dependencies. Затем измените

"scripts": { 
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js" 
     }, 

в

"scripts": { 
     "start": "node ./node_modules/webpack/bin/webpack.js" 
     }, 

Answer 2

Я знаю, что это отвечает, но это дополнительное примечание к ответу, который поможет много.

Подсказка 1: При развертывании приложения на Firebase и попытаться браузер доступа (особенно React, Redux) приложение, которое вы можете получить ошибку говоря:

can not find module "run" in bundle.js

Так как уже упоминалось в ответ необходимо, и после этого вы должны выполнить команду:

npm start

Эта команда будет регенерировать bundle.js и не будет включать/требовать «запустить» модуль, который мы использовали во время разработки. После этого вы можете развернуть последнюю версию bundle.js на сервер.

Подсказка 2: В webpack.config внутри output:{...} раздел вы должны установить path и publicPath в новый каталог, т.е. /Public/. Иначе на Firebase хост, когда вы указали «общедоступный» каталог в качестве каталога по умолчанию для развертывания - тогда он создаст проблему, и приложение не будет запущено на сервере Firebase.

Примечание: на самом деле я не уверен, и не знаю, как сказать firebase использовать файлы на корню, а не в моей «общественной» папку Но я думаю, что выводят Webpack сгенерированные файлы и сохраняя другие общественные файлы (css, html) внутри общедоступной папки хорошо, так как иначе firebase deploy может загружать другие файлы, сидящие в корневом каталоге. (поправьте меня если я ошибаюсь).

Хорошо, наконец, когда вы обновляете веб-пакет .Значения вывода конфигурации, как:

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

Тогда (наконец убедившись, что вы сделали с Tip.1, а) и выполнить команду, чтобы получить последние bundle.js

npm start

. И, наконец, вы можете пойти и развернуть, используя:

firebase deploy

Я полагаю, что вы, возможно, следовали первоначальным шагам инициализации и других команд init перед выполнением последней команды развертывания.

Примечание: Команда "firebase serve" также полезна для отладки и тестирования, если приложение работает на локальной машине, и оно хорошо работает на сервере Firebase.