Webpack para back-end?
Veja, estou a criar uma aplicação com um front-end (ReactJS) e um back-end (ExpressJS). O aplicativo será publicado em Heroku. Agora parece que eu deveria usar Webpack com ExpressJS, bem como para começar o aplicativo em funcionamento com um único comando (front-end e back-end).
Mas o tipo que escreveu este blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I parece usar o Webpack para juntar todos os ficheiros js, o que, na minha opinião, não é necessário. Porque devo juntar os meus ficheiros? Eu acho que eu só quero executar o back-end, assistir meus arquivos back-end para mudanças e usar o resto do poder do Webpack apenas para a front-end. Como é que vocês arranjam o front-end, mas ao mesmo tempo? o tempo passou na parte de trás do nodejs? Ou há alguma boa razão para agrupar arquivos back-end com Webpack?2 answers
Porque usar o webpack na infra-estrutura do nó
Se estamos a falar de react and node app você pode construir isomorphic react app . E se estiver a usar import módulos ES6 no aplicativo reat no lado do cliente é ok - eles são empacotados pelo webpack no lado do cliente.
Mas o problema está no servidor quando você está usando os mesmos módulos reat, uma vez que o nó não suporta os módulos ES6 . Você pode usar require('babel/register'); no servidor de nós, mas ele código de transipile em tempo de execução - não é eficaz. A maneira mais comum de resolver este problema é a infra-estrutura de pacote por webpack (você não precisa de todo o código para ser transpile por webpack - apenas problemático, como reat stuff neste exemplo).
Agrupar a frente e a infra-estrutura ao mesmo tempo
A configuração do seu webpack pode ter de ser configurada na lista: uma para a interface e a segunda para a infra-estrutura:
webpack.config.js
const common = {
module: {
loaders: [ /* common loaders */ ]
},
plugins: [ /* common plugins */ ],
resolve: {
extensions: ['', '.js', '.jsx'] // common extensions
}
// other plugins, postcss config etc. common for frontend and backend
};
const frontend = {
entry: [
'frontend.js'
],
output: {
filename: 'frontend-output.js'
}
// other loaders, plugins etc. specific for frontend
};
const backend = {
entry: [
'backend.js'
],
output: {
filename: 'backend-output.js'
},
target: 'node',
externals: // specify for example node_modules to be not bundled
// other loaders, plugins etc. specific for backend
};
module.exports = [
Object.assign({} , common, frontend),
Object.assign({} , common, backend)
];
Se começar isto config com webpack --watch irá em paralelo construir os seus dois ficheiros. Quando você editar o código específico da interface somente frontend-output.js será gerado, o mesmo é para backend-output.js. A melhor parte é quando você editar parte de reação isomórfica-webpack irá construir ambos os arquivos de uma vez.
Você pode encontrar nesta explicação tutorial quando usar webpack para node (no Capítulo 4).
Você pode usar webpack-node-externals , do readme:
npm install webpack-node-externals --save-dev
var nodeExternals = require('webpack-node-externals');
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};