webpack 是當前最熱門的前端資源模組化管理及打包工具，任何型態資源(CommonJs Module, AMD Module, ES6 Module, CSS ...) 都可以視為模組，透過 webpack 依賴模組之相依姓和規則打包成前端資源；目前已演進到 v2.2 版本，設定上與 v1.X 有些微差異，各項設定說明如下。目前最新版本為 v2.2。

入口起點 (Entry Point)

module.exports = {
    // ...
    entry: {
        app: './src/main.js'
    }
    // ...
}

可以透過入口檔案 import 所需相依模組，可允許多組使用。

輸出 (Output)

module.exports = {
    // ...
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath :
            config.dev.assetsPublicPath
    }
    // ...
}

打包後輸出檔案位置：

1. path 表示打包完成的檔案放置位置 (預設為 dist 資料夾)
2. fileanme 中的 [name] 會依據 entry 屬性名稱變動；可以使用 [chunkhash] 根據內容 hash 作為檔名，隨著內容變動而變動，避免過板時舊檔被快取而產生問題
3. publicPath 表示設定所有 assets 的 base path，多用於取得 CDN 相關資源情境

解析模組 (Resolve)

function resolve (dir) {
  // __dirname 表示被執行js所在資料夾位置
  // .. 表示上一層  
  return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
            resolve('src'),
            resolve('node_modules')
        ],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'src': resolve('src'),
            'assets': resolve('src/assets'),
            'components': resolve('src/components')
        }
    }
    // ...
}

文件路徑指向相關設定，讓 import module 更加精簡：

1. extensions : 自動解析副檔名，設定後可用 require('boo') 表示 require('boo.vue')
2. modules : 模組搜索路徑，設定後可用 require('boo.js') 取代相對路徑 require('../src/boo.js')
3. alias : 建立別名，設定後可用 require('components/boo.js') 取代相對路徑 require('../../components/boo.js')

加載器 (Loader)

function resolve(dir) {
    // __dirname 表示被執行js所在資料夾位置
    // .. 表示上一層  
    return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: "pre",  // 預前處理
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            }
            // ...
        ]
    }
    // ...
}

在 rules 中設置多組 Loader 來處理對應檔案的轉換作業：

1. test : 設置檔案描述 (ex. 副檔名為 js / vue 的檔案)
2. loader : 使用哪個 loader 套件進行處理
3. enforce : 可選擇 pre 來進行前處理 (ex. 透過 eslint 先檢查代碼有無錯誤)
4. include : 限制特定資料夾中的檔案 (縮小範圍、提升轉換效率)
5. optoins : 其他設置項目