(1) entry

1. single entry

const config = {
    entry: './path/to/my/entry/file.js'
}

module.exports = config;

2. Object Syntax

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
}

3. Multi Page Application

const config = {
    entry: {
       pageOne: './src/pageOne/index.js',
       pageTwo：'./src/pageTwo/index.js',
       pageThree: './src/pageThree/index.js'
    }
}

(2) output

1. Usage

const config = {
    output: {
       filename: 'bundle.js',  
       path: '/home/proj/public/assets'  
    }
}

2. Multiple Entry Points

ensure that each file has a unique name

const config = {
    entry: {
       app: './src/app.js',
       search: './src/search.js'
    },
    output: {
       filename: '[name].js'
       path: __dirname + '/dist'
    }
}

3. Advanced

here is a more complicated example of using a CDN and hashes for assets:

const config = {
    output: {
       path: "home/proj/cdn/assets/[hash]",
       publicPath: "http://cdn.example.com/assets/[hash]/"
    }
}

(3) Loaders

1. npm your loaders

npm install --save-dev css-loader  
npm install --save-dev ts-loader   

//instruct webpack to use the css-loader for every .css files
//instruct webpack to use the ts-loader for every .ts files

module.exports = {
    module: {
       rules: [
          { test: /\.css$/, use: 'css-loader'},
          { test: /\.ts$/, use: 'ts-loader'},
       ]
    }
}

2. There are three ways to use loaders in your application:

(一) configuration

module: {
    rules: [
       {
          test: /\.css$/,
          user: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                  modules: true
              }
            }
          ]
       }
    ]
}

(二) inline

import Styles from 'style-loader!css-loader?modules!./styles.css';

(三) CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

(4) Plugins

const Htmlwebpack = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

plugins: [
   new webpack.optimize.UglifyJsPlugin(),
   new HtmlWebpackPlugin({template: './src/index.html'})
]

(5) configuration

the simplest configuration

var path = require('path');

module.exports = {
    entry: './foo.js',
    output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'foo.bundle.js'
    }
}

(6) modules

1. what is a webpack module ?

   An ES2015 statement ： import
   A CommonJS statement：require()
   An AMD statement：define and require
   An css/sass/less statement: @import 

2. supported module types

The webpack community has built loaders for a wide variety of popular languages and language processors,

(7) module resolution

1. a module can be required as a dependency from another module as：

import foo from 'path/to/module'
//or
require('path/to/module')

2. resolving rules in webpack:

using enhanced-resolve, webpack can resolve three kinds of file paths:

Absolute paths

import "home/me/file"

import "C:\\User\\me\\file"

Relative paths

import "../src/file1";
import "./file2";

Module paths

import "module";
import "module/lib/file";

(8) Dependency Graph

任何時候廷粒，一個文件依賴于另一個文件，webpack 就把此視為文件之間有依賴關(guān)系晒他。這使得 webpack 可以接收非代碼資源(non-code asset)（例如圖像或 web 字體）同木，并且可以把它們作為依賴提供給你的應用程序。

(9) Targets
因為服務器和瀏覽器代碼都可以用 JavaScript 編寫捶码，所以 webpack 提供了多種構(gòu)建目標(target)汹押，

用法：
module.exports = {
target: 'node'
};

多個target :

盡管 webpack 不支持向 target 傳入多個字符串缘回，你可以通過打包兩份分離的配置來創(chuàng)建同構(gòu)的庫：

var path = require('path');
var serverConfig = {
target: 'node',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.node.js'
}
//…
};

var clientConfig = {
target: 'web', // <=== 默認是 'web'剂公，可省略
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'lib.js'
}
//…
};

module.exports = [ serverConfig, clientConfig ];