webpack Tutorial
Iniziare con il webpack

Osservazioni

require("./code.js") // Load Javascript dependency
var css = require("./styles.css"); // Load CSS as a string
var base64Image = require("./image.png"); // Load an image as a base64 string

// From code.js
console.log("Hello, World");
// From styles.css
var css = "body { margin: 0; padding: 0; } h1 { color: #FF0000; }";
// From image.png
var base64Image = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX...";

Versioni

Installazione

Prerequisiti:

NodeJS e npm

Esistono due modi per installare Webpack: globalmente o per progetto. È meglio avere la dipendenza installata per progetto, in quanto ciò consentirà di utilizzare diverse versioni di webpack per ciascun progetto e non richiedere all'utente di aver installato il webpack a livello globale.

Installazione per progetto

Esegui il seguente comando dalla cartella principale del tuo progetto:

npm install webpack --save-dev

È quindi possibile eseguire l'eseguibile del node_modules installato su node_modules :

./node_modules/.bin/webpack

O creare uno script NPM nel package.json file, dove è possibile omettere la node_modules parte - NPM è intelligente sufficienti per includere tale cartella sul suo cammino.

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

// from terminal:
npm start

Installazione a livello globale

Esegui il seguente comando al prompt:

npm install webpack -g

Esempio di webpack.config.js con babel

dipendenze

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')
    }],
  }
};

Esempio di Javascript + CSS + tipi di carattere + immagini

Moduli richiesti

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

Struttura delle cartelle

.
└── 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/**/*.*') richiederà tutti i file nella cartella images come voce.

ExtractTextPlugin acquisirà l'output generato e creerà un file css bundle.

Esempio semplice di Webpack

Il minimo richiesto per utilizzare Webpack è il seguente comando:

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

// this is equivalent to:

webpack source-file destination-file

Il pacchetto Web prenderà il file sorgente, compilerà la destinazione di output e risolverà qualsiasi dipendenza nei file di origine.

Webpack, React JSX, Babel, ES6, configurazione semplice

Assicurati di installare le corrette dipendenze di npm (babel ha deciso di suddividersi in un gruppo di pacchetti, qualcosa che ha a che fare con le "dipendenze dei peer"):

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 è una funzione che esegue la scansione dei tuoi node_modules e garantisce che non siano transpiled e raggruppati insieme al tuo codice front-end, sebbene assicuri che il bundle mantenga il riferimento ad essi. Questo aiuta con una transpilazione più veloce, dal momento che non stai ri-codificando le librerie.

Configurazione semplice del webpack con Node.js

Struttura delle cartelle

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

package.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

eseguire npm i --save-dev per installare le dipendenze

eseguire il nodo. \ node_modules \ webpack \ bin \ webpack.js una volta installate le dipendenze

eseguire il nodo webserver.js per avviare il server