webpack學習進階（一）

首先,webpack是什麼？

webpack是模塊化管理工具，使用webpack能夠對模塊進行壓縮、預處理、按需打包、按需加載等。

---

爲何使用webpack?

• 對 CommonJS 、AMD 、ES6的語法作了兼容；
• 對js、css、圖片等資源文件都支持打包；
• 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持；
• 有獨立的配置文件webpack.config.js；
• 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間；
• 支持 SourceUrls 和 SourceMaps，易於調試；
• 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活；
• webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快；
• webpack最經常使用與spa應用，主要是vue和React，其實它就很是像Browserify，可是將應用打包爲多個文件。若是單頁面應用有多個頁面，那麼用戶只從下載對應頁面的代碼. 當他麼訪問到另外一個頁面, 他們不須要從新下載通用的代碼。

webpack也能用於服務端，可是構建後端代碼通常都不會用webpack，坑太多了，因此正常狀況下只用於前端

---

webpack和gulp的區別

gulp是基於流的構建工具：all in one的打包模式，輸出一個js文件和一個css文件，優勢是減小http請求，萬金油方案。
webpack是模塊化管理工具，使用webpack能夠對模塊進行壓縮、預處理、打包、按需加載等。

---

webpack的特徵？

插件化：webpack自己很是靈活，提供了豐富的插件接口。基於這些接口，webpack開發了不少插件做爲內置功能。
速度快：webpack使用異步IO以及多級緩存機制。因此webpack的速度是很快的，尤爲是增量更新。
豐富的Loaders：loaders用來對文件作預處理。這樣webpack就能夠打包任何靜態文件。
高適配性：webpack同時支持AMD/CommonJs/ES6模塊方案。webpack會靜態解析你的代碼，自動幫你管理他們的依賴關係。此外，webpack對第三方庫的兼容性很好。
代碼拆分：webpack能夠將你的代碼分片，從而實現按需打包。這種機制能夠保證頁面只加載須要的JS代碼，減小首次請求的時間。
優化：webpack提供了不少優化機制來減小打包輸出的文件大小，不只如此，它還提供了hash機制，來解決瀏覽器緩存問題。
開發模式友好：webpack爲開發模式也提供了不少輔助功能。好比SourceMap、熱更新等。
使用場景多：webpack不只適用於web應用場景，也適用於Webworkers、Node.js場景。

---

基本的使用

const path = require('path');
module.exports = {
  entry: "./app/entry", // string | object | array
  // Webpack打包的入口
  output: {  // 定義webpack如何輸出的選項
    path: path.resolve(__dirname, "dist"), // string
    // 全部輸出文件的目標路徑
    filename: "[chunkhash].js", // string
    // 「入口(entry chunk)」文件命名模版
    publicPath: "/assets/", // string
    // 構建文件的輸出目錄
    /* 其它高級配置 */
  },
  module: {  // 模塊相關配置
    rules: [ // 配置模塊loaders，解析規則
      {
        test: /\.jsx?$/,  // RegExp | string
        include: [ // 和test同樣，必須匹配選項
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 必不匹配選項（優先級高於test和include）
          path.resolve(__dirname, "app/demo-files")
        ],
        loader: "babel-loader", // 模塊上下文解析
        options: { // loader的可選項
          presets: ["es2015"]
        },
      },
  },
  resolve: { //  解析模塊的可選項
    modules: [ // 模塊的查找目錄
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的擴展
    alias: { // 模塊別名列表
      "module": "new-module"
      },
  },
  devtool: "source-map", // enum
  // 爲瀏覽器開發者工具添加元數據加強調試
  plugins: [ // 附加插件列表
    // ...
  ],
}

以上簡單配置主要有一下幾點：

• Entry：指定webpack開始構建的入口模塊，從該模塊開始構建並計算出直接或間接依賴的模塊或者庫
• Output：告訴webpack如何命名輸出的文件以及輸出的目錄
• Loaders：因爲webpack只能處理javascript，因此咱們須要對一些非js文件處理成webpack可以處理的模塊，好比sass文件
• Plugins：Loaders將各種型的文件處理成webpack可以處理的模塊，plugins有着很強的能力。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。但也是最複雜的一個。好比對js文件進行壓縮優化的UglifyJsPlugin插件
• Chunk：coding split的產物，咱們能夠對一些代碼打包成一個單獨的chunk，好比某些公共模塊，去重，更好的利用緩存。或者按需加載某些功能模塊，優化加載時間。在webpack3及之前咱們都利用CommonsChunkPlugin將一些公共代碼分割成一個chunk，實現單獨加載。在webpack4 中CommonsChunkPlugin被廢棄，使用SplitChunksPlugin