webpack Zelfstudie
Aan de slag met webpack

Opmerkingen

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...";

versies

Installatie

Vereisten:

NodeJS en npm

Er zijn twee manieren om Webpack te installeren: globaal of per project. Het is het beste om de afhankelijkheid per project te installeren, omdat u hierdoor verschillende versies van webpack voor elk project kunt gebruiken en niet vereist dat de gebruiker webpack wereldwijd moet hebben geïnstalleerd.

Installatie per project

Voer de volgende opdracht uit vanuit de hoofdmap van uw project:

npm install webpack --save-dev

U kunt het uitvoerbare webpack vervolgens uitvoeren op node_modules :

./node_modules/.bin/webpack

Of maak een NPM-script in uw package.json bestand, waar u het gedeelte node_modules kunt weglaten - npm is slim genoeg om die map in zijn PATH op te nemen.

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

// from terminal:
npm start

Wereldwijd installeren

Voer de volgende opdracht uit bij een prompt:

npm install webpack -g

Voorbeeld van webpack.config.js met babel

afhankelijkheden

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

Voorbeeld van Javascript + CSS + Fonts + afbeeldingen

Vereiste modules

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

Mappenstructuur

.
└── 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/**/*.*') vereist alle bestanden in de map images als invoer.

ExtractTextPlugin pakt de gegenereerde output en maakt een gebundeld css bestand.

Webpack eenvoudig voorbeeld

Het minimum dat vereist is om Webpack te gebruiken, is de volgende opdracht:

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

// this is equivalent to:

webpack source-file destination-file

Webpakket neemt het bronbestand, compileert naar de uitvoerbestemming en lost eventuele afhankelijkheden in de bronbestanden op.

Webpack, React JSX, Babel, ES6, eenvoudige configuratie

Zorg ervoor dat u de juiste npm-afhankelijkheden installeert (babel besloot zichzelf te splitsen in een aantal pakketten, iets dat te maken heeft met "peer-afhankelijkheden"):

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 is een functie die uw node_modules scant en ervoor zorgt dat ze niet worden transpiled en gebundeld samen met uw front-end code, hoewel het ervoor zorgt dat de bundel ernaar verwijst. Dit helpt bij snellere transpilatie, omdat u bibliotheken niet opnieuw codeert.

Eenvoudige webpackconfiguratie met Node.js

Mapstructuur

.
├── 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;
});

NOTITIE

voer npm i - save-dev uit om afhankelijkheden te installeren

voer knoop uit. \ node_modules \ webpack \ bin \ webpack.js zodra de afhankelijkheden zijn geïnstalleerd

voer knoop webserver.js uit om de server te starten