webpack2

webpack

webpack is a module bundler for modern JavaScript applications.
Set up module and resources well, it is helpful for frontend development.

Entry Kick off app Root
Output Output
Loaders Assets handler .css .html .scss .jpg Loaders in webpack transform these files into modules as they are added to your dependency graph.
Plugins Action and custom functionality compilations, chunks

Example

Create project and set dependencies.
Create project

mkdir webpack-demo
cd webpack-demo
npm init -y

Generate package.json

Install loader and plugins

npm install --save webpack
npm install --save webpack-dev-server
npm install --save-dev file-loader csv-loader xml-loader css-loader style-loader extract-text-webpack-plugin sass-loader node-sass
npm install --save-dev html-webpack-plugin

Prepare webpack.config.js (webpack configuration file)

var path = require('path');

var webpack = require('webpack');

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

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   // entry: './app/index.js',
    entry: {
        main: './app/index.js',
        vendor: 'moment'
    },
    /*
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },*/
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            //use: [ 'style-loader', 'css-loader' ]
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        },{
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                    options: {}
                }]
        },{
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        },{
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        },{
            test: /\.(csv|tsv)$/,
            use: 'csv-loader'
        },{
            test: /\.xml$/,
            use: 'xml-loader',
        }]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',  // Vendor
            //names: ['vendor', 'manifest'],
            minChunks: function (module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
        /*
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        })*/
        new HtmlWebpackPlugin()

    ],
    devServer: {
        port: 7777,
        host: 'localhost',
        noInfo: false,
        stats: 'minimal'
    }
};

Add npm commands under package.json if you want

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "clean": "rm -rf dist/*",
    "probuild": "webpack -p",
    "start": "webpack-dev-server
}

All details are explained by next entries