萬物皆模組：在 webpack 的世界中，除了 Javascript，其他任何資源都可以當做模組的方式引用

按需載入： webapp 的優化關鍵在於程式碼體積，當應用體積增大，實現程式碼的按需載入是剛需，這也是 webpack 出現的根本原因

可定製化： 任何一個工具都不可能解決所有問題，提供解決方案才是最可行的，webpack 基於可定製化的理念構建，通過外掛系統，配置檔案，可以實現大型專案的定製需求。

1. webpack載入器（loader）

所有資源都是”模組“， 這是webpack的設計理念，不同於CMD,AMD機制，其內部實現了一套資源載入機制。
Webpack提供了一套載入器：

• css/style loader: 載入css檔案；
• less-loader: 編譯less成為css;
• url-loader: 在js中載入png/jpg格式的圖片檔案；
• babel-loader: 將ES6的程式碼轉換成ES5程式碼

module.exports = {
//模組的入口檔案。依賴項陣列中所有的檔案會按順序打包，每個檔案進行依賴的遞迴查詢，直到所有模組都被打成包；
  entry: "./src/main.js",
//模組的輸出檔案：
  output: {
    //打包後的檔名
    filename: "build.js",
    //打包檔案的絕對路徑
    path: __dirname + '/assets/'
 
,
    //網站執行的訪問路徑
    publicPath: "/assets/"
  }，
  module: {
  //正則匹配載入器，除（sass型別）
    loaders: [
      {test: /.css$/, loader: 'style!css'},
      {test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
  resolve: {
  //模組別名定義，方便後續直接引用別名，無須多寫長長的地址
    extensions: ['', '.js', '.jsx'],    
    alias: {
        a : 'js/assets/a.js'
 
,  // 後面直接引用 require(“a”)即可引用到模組
        b : 'js/assets/b.js',
        c : 'js/assets/c.js'
    }
  },
  //外掛項
  plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}

2. 配置檔案

package.json:

{
  "name": "html-webpack-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.19.0",
    "webpack": "^1.13.1"
  }
}

webpack.config.js:

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');

//定義了一些資料夾的路徑
var ROOT_PATH = path.resolve(__dirname);

var SRC_PATH = path.resolve(ROOT_PATH, 'src');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
console.log(SRC_PATH)
module.exports = {

  entry: SRC_PATH + "/js/index.js",
  //輸出的檔名 合併以後的js會命名為index.js
  output: {
    path: BUILD_PATH,
    filename: 'index.js'
  },
  //新增我們的外掛 會自動生成一個html檔案
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

3.壓縮js與css

webpack已經內嵌了uglifyJS來完成對JS與CSS的壓縮混淆，無需引用額外的外掛。

配置檔案更改如下：

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
//定義了一些資料夾的路徑
var ROOT_PATH = path.resolve(__dirname);

var SRC_PATH = path.resolve(ROOT_PATH, 'src');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
console.log(SRC_PATH)
module.exports = {

  entry: {
    'index' : SRC_PATH + "/js/index.js"
  },
  //輸出的檔名 合併以後的js會命名為index.js
  output: {
    path: BUILD_PATH + '/js/',
    filename: '[name].js'
  },
  //新增我們的外掛 會自動生成一個html檔案
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app',
      minify:{ //壓縮HTML檔案
        removeComments:true,    //移除HTML中的註釋
        collapseWhitespace:true    //刪除空白符與換行符
      }
    }),
    new webpack.optimize.UglifyJsPlugin({    //壓縮程式碼
       compress: {
           warnings: false
       },
       except: ['$super', '$', 'exports', 'require']    //排除關鍵字
    })
  ]
};

4. webpack打包多個資原始檔

即引入多個入口函式，按需載入：

module.exports = {
  entry: {
     "main": "./src/a.js",
     "index": "./src/index.js"
  },
  output: {
    filename: "[name].js"
  }
};