Cordova com react webpack ambiente de produção

Nesse post mostrei como montar o ambiente de desenvolvimento com webpack em um projeto cordova. Como vimos esse post anterior, todo nosso código js fica compilado no arquivo bundle.js 

Na própria documentação do webpack: https://webpack.js.org/guides/production/ podemos ver que não é uma boa prática mandar o bundle.js desse jeito para produção.

Agora vamos evoluir o mesmo projeto do post anterior seguindo essas boas práticas.

Primeiro vamos separar os arquivos de configuração do webpack em 3 (Depois pode excluir o arquivo webpack.config.js). O primeiro vai ser  webpack.common.js com o seguinte conteúdo

var path = require("path");
var DIST_DIR = path.resolve(__dirname, "www");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR,
        filename: './bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};
module.exports = config;

Como o nome já sugere, essas são as configurações comuns tanto de desenvolvimento como para produção. A parte de server vai para o arquivo de configuração de desenvolvimento.

Agora vamos criar o arquivo webpack.dev.js com seguinte conteúdo:

const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   devtool: 'inline-source-map',
   devServer:{
        port:8081,
        contentBase:"./www"
    }
 });

O plugin webpack-merge faz a junção das configurações comuns com as configurações de desenvolvimento. 

Logo vamos precisar instalar o módulo webpack-merge, mas antes vamos criar o arquivo webpack.prod.js com o conteúdo:

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
 module.exports = merge(common, {
   plugins: [
     new UglifyJSPlugin({
      sourceMap: true
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     })
   ]
 });

Aagora podemos ver a diferença. No ambiente de produção, vamos usar o plugin uglifyjs para deixar o bundle.js mimificado e compilado. Isso vai tornar o javascript mais rápído no ambiente de produção. 

Outra coisa importante é na parte DefinePlugin onde definimos uma variável de ambiente indicando que estamos em produção.

Dessa forma posso suprimir alguma parte do código que só precise se executado em desenvolvimento evitando mandar coisas desnecessárias para produção. Posso fazer o tratamento dessa forma:

if (process.env.NODE_ENV !== 'production') {
   console.log('Looks like we are in development mode!');
}

Agora vamos parar o servidor e instalar o módulo que está faltando:

npm install --save-dev webpack-merge

Antes de inicar webpack-dev-server ainda falta alterar os scripts do arquivo  package.json.

O script dev vai carregar as cofigurações de desenvolvimento

"dev": "webpack-dev-server --open --config webpack.dev.js --progress --colors --inline --hot",

e o script build vai carregar as configurações de produção.

"build": "webpack --config webpack.prod.js"

O arquivo package.json vai ficar assim:

{
    "name": "com.yourname.poc1",
    "displayName": "poc1",
    "version": "1.0.0",
    "description": "A sample Apache Cordova application that responds to the deviceready event.",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server --open --config webpack.dev.js --progress --colors --inline --hot",
        "build": "webpack --config webpack.prod.js"
    },
    "author": "Apache Cordova Team",
    "license": "Apache-2.0",
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.11.1",
        "webpack-merge": "^4.1.1"
    },
    "dependencies": {
         "react": "^16.2.0",
         "react-dom": "^16.2.0"
   }
}

Finalmente vamos executar 

npm run dev

e ver o resultado. Se estiver tudo ok, o ambiente de desenvolvimento continua funcionando como antes mas não há mudanças. 

Agora vamos parar o servidor e executar 

npm run buil

e ver como ficou o arquivo bundle.js

Imagem

Se tudo ocorreu bem, o bundle.js é gerado com esse conteúdo:

!function(r){function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var e={};t.m=r,t.c=e,t.d=function(r,e,n){t.o(r,e)||Object.defineProperty(r,e,{configurable:!1,enumerable:!0,get:n})},t.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(e,"a",e),e},t.o=function(r,t){return Object.prototype.hasOwnProperty.call(r,t)},t.p="",t(t.s=0)}([function(r,t,e){"use strict";alert("deu rock!")}]);

 

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente