Introdução ao webpack

Exemplo de Javascript + CSS + Fontes + Imagens

Módulos obrigatórios

npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader

Estrutura de pastas

.
└── assets
    ├── css
    ├── images
    └── js

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const glob = require('glob');

module.exports = {
  entry: {
    script: path.resolve(__dirname, './assets/js/app.js'),
    style: path.resolve(__dirname, './assets/css/app.css'),
    images: glob.sync(path.resolve(__dirname, './assets/images/**/*.*')),
  },
  context: __dirname,
  output: {
    path: path.resolve('./dist/assets'),
    publicPath: '/dist/assets',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        }),
      },
      {
        test: /(\.woff2?|\.woff|\.ttf|\.eot|\.svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=[name]-[hash:6].[ext]',
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        loader: 'file-loader?name=[name].[ext]',
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('app.css' /* optional: , { allChunks: true } */),
  ],
};

glob.sync('./assets/images/**/*.*') exigirá todos os arquivos na pasta de imagens como entrada.

ExtractTextPlugin pegará a saída gerada e criará um arquivo css empacotado.

Instalação

Pré-requisitos:

NodeJS e npm

Existem duas maneiras de instalar o Webpack: globalmente ou por projeto. É melhor ter a dependência instalada por projeto, pois isso permitirá que você use diferentes versões do webpack para cada projeto e não exija que o usuário tenha instalado o webpack globalmente.

Instalando por projeto

Execute o seguinte comando na pasta raiz do seu projeto:

npm install webpack --save-dev

Você pode então executar o executável do webpack instalado em node_modules:

./node_modules/.bin/webpack

Ou crie um script NPM em seu arquivo package.json, onde você pode omitir a parte node_modules - npm é inteligente o suficiente para incluir essa pasta em seu PATH.

// in package.json:
{
  ...
  "scripts": {
    "start": "webpack"
  },
  ...
}

// from terminal:
npm start

Instalando globalmente

Execute o seguinte comando em um prompt:

npm install webpack -g

Exemplo de webpack.config.js com babel

Dependências

npm i -D webpack babel-loader

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/'],
  },
  output: {
    path: __dirname,
    filename: './dist/[name].js',
  },
  resolve: {
    extensions: ['', '.js'],
  },
  module: {
    loaders: [{
      test: /\.js$/, 
      loaders: ['babel-loader'],
      include: path.resolve(__dirname, 'src')
    }],
  }
};

Exemplo Simples de Webpack

O mínimo necessário para usar o Webpack é o seguinte comando:

webpack ./src/index.js ./dist/bundle.js

// this is equivalent to:

webpack source-file destination-file

O Web pack pegará o arquivo de origem, compilará para o destino de saída e resolverá quaisquer dependências nos arquivos de origem.

Webpack, React JSX, Babel, ES6, configuração simples

Certifique-se de instalar as dependências npm corretas (o babel decidiu se dividir em vários pacotes, algo a ver com “dependências de pares”):

npm install webpack webpack-node-externals babel-core babel-loader babel-preset-react babel-preset-latest --save

webpack.config.js:

module.exports = {
    context: __dirname, // sets the relative dot (optional)
    entry: "./index.jsx",
    output: {
        filename: "./index-transpiled.js"
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: "babel?presets[]=react,presets[]=latest" // avoid .babelrc
        }]
    }, // may need libraryTarget: umd if exporting as a module
    externals: [require("webpack-node-externals")()], // probably not required
    devtool: "inline-source-map"
};

webpack-node-externals é uma função que verifica seus node_modules e garante que eles não sejam transpilados e agrupados junto com seu código front-end, embora garanta que o pacote retenha a referência a eles. Isso ajuda na transpilação mais rápida, já que você não está recodificando bibliotecas.

Configuração simples de webpack com Node.js

Estrutura de pastas

.
├── lib
├── modules
|   ├── misc.js
|   ├── someFunctions.js
├── app.js
├── index.html
├── package.json
├── webpack.config.js
└── webserver.js

pacote.json

{
  "name": "webpack-example-with-nodejs",
  "version": "1.0.0",
  "description": "Example using webpack code-splitting with some Node.js to support the example",
  "main": "webserver.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "@Gun",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.17.1",
    "express": "^4.15.2",
    "http": "0.0.0",
    "morgan": "^1.8.1",
    "multer": "^1.3.0",
    "webpack": "^2.4.1"
  }
}

webpack.config.js

var path = require('path'); // used to get context

module.exports = {
    context: path.join(__dirname, 'app'), // resolves entry below, must be absolute path
    entry: './app.js', // entry point or loader for the application
    output: {
        path: path.join(__dirname, 'app/lib'), // express static folder is at /app/lib
        filename: '[name].bundle.js', // the file name of the bundle to create.  [name] is replaced by the name of the chunk (code-splitting)
        publicPath: 'static' // example uses express as the webserver
    }
};

webserver.js

var express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    multer = require('multer')()
    logger = require('morgan'),
    fs = require('fs'),
    http = require('http');

var app = express();
var port = 31416;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger('short'));
app.use('/jsBundles',express.static('lib'));
app.get('/', function(request, response){
    response.sendFile(__dirname + '/index.html');
});

var server = http.createServer(app).listen(port, function(){
    console.log("I feel a disturbance in the port:" + port);
});

index.html

<!DOCTYPE html>
<html>
    <body>
        <div id="someValue"><label for="num">Enter a number:</label><input id="num" /></div>
        <div class="buttonList">
            <ul>
                <li><button id="doubleIt">double it</button></li>
                <li><button id="tripleIt">triple it</button></li>
            </ul>
        </div>
        <div id="someOtherValue">
            And the count shall be: <span id="theCount"></span>
        </div>
        <script src="/jsBundles/main.bundle.js"></script>        
    </body>
</html>

app.js

require(['./modules/someFunctions'],function(){
        window.onload = function(){
                var someFunctions  = require('./modules/someFunctions');             
                document.getElementById('doubleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Double(num);
                };

                document.getElementById('tripleIt').onclick = function(){
                        var num = document.getElementById('num').value;
                        document.getElementById('theCount').innerHTML = someFunctions.Triple(num);
                };
        };
});

misc.js

var self = {};
self.isNumber = function(value){
    // http://stackoverflow.com/questions/9716468/is-there-any-function-like-isnumeric-in-javascript-to-validate-numbers
    return !isNaN(parseFloat(value)) && isFinite(value);
};
module.exports = self;

someFunctions.js

require(['./misc'], function(){
    var misc= require('./misc');

    var self = {};
    self.Double = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*2;
    }

    self.Triple = function(value){
        if(!misc.isNumber(value)){
            return 0;
        };
        return value*3;
    }

    module.exports = self;
});

NOTA

execute npm i –save-dev para instalar dependências

execute node .\node_modules\webpack\bin\webpack.js assim que as dependências estiverem instaladas

execute node webserver.js para iniciar o servidor

Introdução ao webpack

Exemplo de Javascript + CSS + Fontes + Imagens #

Instalação #

Exemplo de webpack.config.js com babel #

Exemplo Simples de Webpack #

Webpack, React JSX, Babel, ES6, configuração simples #

Configuração simples de webpack com Node.js #