webpack

ps：webpack 最新語法有變化，也支援中文文件。可以看官方中文文件

• 思考題：
  
  • 1.什麼是webpac？
  • 2.由什麼組成？
  • 3.如何使用？
  • 部分內容參考的是 阮一峰老師的英文件教程。

1.什麼是webpack？

• 我們通常在html 頁面前邊會通過 script標籤引入 一堆的js

  • 這一大堆js 會造成：1. 可能變數名衝突
  • 2.順序只能按照< script > 順序載入
  • 3.只能自己記得 檔案之間的依賴關係
  • 4.大型專案各個資源難以管理。長期導致程式碼混亂不堪

• 雖然有很多的標準出現，但風格都不一樣

  • 例如：CommonJs (特點：exports 或 module.exports) 但，依然是順序載入，易阻塞。
  • 例如： AMD 提高了開發成本，程式碼的閱讀和書寫比較困難，模組定義方式的語義不順暢
  • 還有 其他的標準等

• 有沒有一種模組化系統

  • 可以相容多種模組風格，儘量可以利用已有的程式碼，不僅僅只是 JavaScript 模組化，還有 CSS、圖片、字型等資源也需要模組化。

  • 在編譯的時候，要對整個程式碼進行靜態分析，分析出各個模組的型別和它們依賴關係，然後將不同型別的模組提交給適配的載入器來處理。

  • 比如一個用 LESS 寫的樣式模組，可以先用 LESS 載入器將它轉成一個CSS 模組，在通過 CSS 模組把他插入到頁面的 < style> 標籤中執行。
    Webpack 就是在這樣的需求中應運而生。
• ## 總結：
  Webpack 是一個模組打包器。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。

2. webpack 的主要組成

• 需要一個配置檔案叫做：webpack.config.js ，執行webpack 命令時候 ，讀取其中的任務
  
  • 先了解如何執行，自己再學習配置檔案的書寫格式– 先看下邊

3.如何使用

• 1. 比如：a.js 裡邊引入b.js模組。 合併為一個js

  我們使用webpack 把這兩個模組進行合併

  • 首先全域性安裝 npm i -g webpack (生存環境和gulp 一樣)
  • 然後在區域性安裝 npm i –save-dev webpack
  • npm info webpack 檢視版本
  • 開始使用： 合併 a.js(包含b.js) —> 輸出 ok.js
  • ## 執行：webpack a.js ok.js
    Webpack 會分析入口檔案，解析包含依賴關係的各個檔案。
    這些檔案（模組）都打包到 ok.js 。
    Webpack 會給每個模組分配一個唯一的 id 並通過這個 id 索引和訪問模組。
    在頁面啟動時，會先執行 a.js 中的程式碼，其它模組會在執行 require 的時候再執行。

• 2. Loader (如何合併其他格式的檔案)

  • Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。

    • 1.什麼是loader?

    • Loader 可以理解為是模組和資源的轉換器，它本身是一個函式，接受原始檔作為引數，返回轉換的結果。
      我們就可以通過 require 來載入任何型別的模組或檔案，比如 CoffeeScript、 JSX、 LESS 或圖片。

    • 2.loader的組成

    • Loader 本身也是執行在 node.js 環境中的 JavaScript 模組，它通常會返回一個函式。
      大多數情況下，我們通過 npm 來管理 loader，但是你也可以在專案中自己寫 loader 模組。
    • ## 總結：loader只是一個js模組（實現格式轉換的）
    • 常用的 比如說我要 寫react 專案：

    • 用到的 轉譯工具 有 babel-core(babel核心) babel- loader(webpack介面檔案) babel-preset-es2015 babel-preset-react (這兩個是babel外掛) css-loader style-loaser less(核心元件) less-loader(介面檔案）

    • 3.loader的使用 壓縮css

    • npm install css-loader style-loader
    • 在index.html 中加入style.css
      在a.js 中新增 require(“!style-loader!css-loader!./style.css”)

    - 上邊的意思是 讀取外鏈的css-loader，再用style-loader插入到頁面中。

• 3.配置檔案書寫

  • ## 1).單檔案入口

  • 每次命令列執行任務，不太爽，寫入配置檔案 webpack.config.js 自動執行
    例如： 我們 index.html 中引入了ok.js(需要合併才能用) ok.js = a.js + b.js

        // webpack.config.js
        module.exports = {
            entry: './ajs',
            output: {
                filename: 'ok.js'
            }
        };

  • 2).多檔案入口

  • 如果有a.js（包含有其他模組） 和 d.js（包含有其他模組） 是獨立的兩個模組 各自
    壓縮就是多檔案入口：

        module.exports = {
            entry: {
                bundle1: './a.js',
                bundle2: './d.js'
            },
            output: {
                filename: '[name].js'
            }
        };

  • 3).react 轉譯

        module.exports = {
            entry: './main.jsx',  //jsx格式檔案
            output: {
                filename: 'reactOk.js'  // 轉換成功的檔案
            },
            module: {
                loaders:[
                    {
                        test: /\.js[x]?$/,    //匹配loader處理檔案的正則
                        exclude: /node_modules/,  // exclude忽略檔案
                        loader: 'babel-loader?presets[]=es2015&presets[]=react' //載入loader的名稱
                    }
                ]
            }
        };
    

  • 4).react 轉譯的另外一種寫法（query)

    • 切記：先安裝
    • “babel-core”
    • babel-loader
    • 上邊兩個是 轉義 核心模組，必須安裝。

    • 而且：一定要，一定要 ，要配置好 .babelrc

    • “babel-preset-es2015”

    • “babel-preset-react”
      

          module.exports = {
              entry: './main.jsx',  //jsx格式檔案
              output: {
                  filename: 'reactOk.js'  // 轉換成功的檔案
              },
              module: {
                  loaders:[
                      {
                          test: /\.jsx?$/,
                          exclude: /node_modules/,
                          loader: 'babel-loader',
                          query: {presets: ['es2015', 'react']} //
                      }
                  ]
              }
          };

  • 5).css-loader 的讀取和插入到頁面

    • 入口檔案 main.js 中加入 require(./app.css)
      “`
      module.exports = {
      entry: ‘./main.js’,
      output: {
      filename: ‘bundle.js’
      },
      module: {
      loaders:[
      {
      test: /.css$/,
      loader: ‘style-loader!css-loader’
      },
      ]
      }
      };
      注意：需要用到連個loader 來處理css 一個讀取處理（css-loader），一個插入到頁面(style-loader)，\
      但值得注意的是不同的 loaders 被引用的時候 在中間加入感嘆號。

這裡的 書寫順序是 從右到左的，否則，webpack 會報錯。

比如： less 時候 這樣寫 style-loader!css-loader!less-loader
“`

- ## 6).Image loader 圖片載入到js中
    -入口檔案 mian.js 加入

```
      var img1 = document.createElement("img");
      img1.src = require("./small.png");
      document.body.appendChild(img1);
```
```
    module.exports = {
        entry: './main.js',
        output: {
            filename: 'bundle.js'
        },
        module: {
            loaders:[
              { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
            ]
        }
    };
    url-loader?limit=8192 //這句的意思是：圖片大小 在8192位元組內就直接轉化能base64資料圖片，
    超過8192位元組就 按照普通圖片輸出
```

外掛：