webpack2

webpack

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

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