一、webpack的介紹

什麼是webpack？

1. webpack是一個模組打包器（bundler）
2. 在webpack看來，前端的所有資原始檔（js/json/css/img/less/...）都會作為模組處理
3. 它將根據模組的依賴關係進行靜態分析，生成對應的靜態資源

理解Loader：

1. webpack本身只能載入js/json模組，如果要載入其它型別的檔案（模組），就需要使用對應的loader進行轉換/載入
2. Loader本身也是執行在node.js環境中的javascript模組
3. 它本身是一個函式，接受原始檔作為引數，返回轉換的結果
4. loader一般以 xxx-loader 的方式命名，xxx代表這個loader 要做的轉換功能，比如  json-loader

 配置檔案（預設）

webpack.config.js ：是一個node模組，返回一個json 格式的配置資訊物件

外掛：

1. 外掛可以完成一些loader不能完成的功能
2. 外掛的使用一般是在webpack的配置資訊plugins選項中指定
3. CleanWebpackPlugin :自動清除指定資料夾的資源
4. HtmlWebpackPlugin :自動生成html資料夾
5. UglifyJSPlugin :壓縮js檔案

二、學習文件

webpack官網：http://webpack.github.io/

webpack3文件（中文）: https://doc.webpack-china.org/

三、開啟專案

1、初始化專案：

 生成package.json檔案

{

   "name":"webpack_test",

    "version":"1.0.0"

}

2、安裝webpack

     ----npm i  webpack  -g  //全域性安裝

     ----npm i  webpack  --save-dev    //區域性安裝

下載1.0的  
    -----npm i  [email protected]  --save-dev

這裡講一下為什麼要先全域性安裝後再區域性安裝，是因為webpack版本問題，1.0和3.0的版本互不相容，你電腦上面是用的webpack3.0的，公司的專案使用的是1.0的，此時公司專案對於你的電腦就不相容，你就在你的檔案目錄下區域性安裝一個1.0的。

 四、編譯打包應用

 
  * 建立入口src/js/ : entry.js
    - document.write("entry.js is work");
  * 建立主頁面: dist/index.html
    - <script type="text/javascript" src="bundle.js"></script>
  * 編譯js
    - webpack    src/js/entry.js     dist/bundle.js    //webpack  打包的檔案（入口）  打包後的檔案（出口）會新建資料夾
  * 檢視頁面效果

 五、新增js/json檔案

* 建立第二個js: src/js/math.js
        ``` 
        export function square(x) {
          return x * x;
        }
        
        export function cube(x) {
          return x * x * x;
        }
        ```
    * 建立json檔案: src/json/data.json
        ```
        {
          "name": "Tom",
          "age": 12
        }
        ```
    * 更新入口js : entry.js
        ```
        import {cube} from './math'
        import data from '../json/data.json'
        //注意data會自動被轉換為原生的js物件或者陣列
        document.write("entry.js is work <br/>");
        document.write(cube(2) + '<br/>');
        document.write(JSON.stringify(data) + '<br/>')
        ```
    * 編譯js:
        ```
        webpack src/js/entry.js dist/bundle.js
        ```
    * 檢視頁面效果

六、使用webpack配置檔案

* 建立webpack.config.js
        ```
        const path = require('path'); //path內建的模組，用來設定路徑。
        
        module.exports = {
          entry: './src/js/entry.js',   // 入口檔案
          output: {                     // 輸出配置
            filename: 'bundle.js',      // 輸出檔名
            path: path.resolve(__dirname, 'dist')   //輸出檔案路徑配置
          }
        };
        ```
    * 配置npm命令: package.json
        ```
        "scripts": {
          "build": "webpack"
        },
        ```
    * 打包應用
        ```
        npm run build

 七、打包css和圖片檔案

* 安裝樣式的loader
    ```
    npm install css-loader style-loader --save-dev
    npm install file-loader url-loader --save-dev
    補充：url-loader是物件file-loader的上層封裝，使用時需配合file-loader使用。
    ```
  * 配置loader
    ```
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',  //可以把css-loader載入的樣式動態地應用到頁面中
            'css-loader'     //只負責載入css模組，沒辦法把css載入應用到當前頁面中
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',  //好處：打包小於8k的檔案，把檔案打包成base64放入js檔案中，以便少發一次請求（請求圖片）
              options: {
                limit: 8192      
              }
            }
          ]
        }
      ]
    }
    ```
  * 嚮應用中新增2張圖片:
    * 小圖: img/logo.png
    * 大圖: img/big.jpg
    
  * 建立樣式檔案: src/css/test.css
    ```
    body {
      background: url('../img/logo.jpg')
    }
    ```
  * 更新入口js : entry.js
    - import '../css/test.css'
  * 新增css樣式

         #box1{
          width: 300px;
          height: 300px;
          background-image: url("../image/logo.jpg");
        }
        #box2{
          width: 300px;
          height: 300px;
          background-image: url("../image/big.jpg");
        }

  * index.html新增元素
  
        <div id="box1"></div>
        <div id="box2"></div>
    
  * 執行打包命令：
    ```
    npm run build
    ```
  * 發現問題：
      * 大圖無法打包到entry.js檔案中，index.html不在生成資源目錄下。
      * 頁面載入圖片會在所在目錄位置查詢，導致頁面載入圖片時候大圖路徑無法找到
      * 解決辦法：
          * 使用publicPath : 'dist/js/' //設定為index.html提供資源的路徑,設定完後找所有的資源都會去當前目錄下找。這種方                     法帶有強制性，說明以後找檔案都在js下找
          * 將index.html放在dist/js/也可以解決。

八、自動編譯打包（熱載入）

* 利用webpack開發伺服器工具: webpack-dev-server
    * 下載
        - npm install --save-dev webpack-dev-server
    * webpack配置
          devServer: {
            contentBase: './dist' 

            //webpack-dev-server預設服務於根路徑下index.html,contentBase引導webpack-dev-server指向某一個資料夾下的                index.html
          },
    * package配置
        - "start": "webpack-dev-server --open"
    * 編譯打包應用並執行
        - npm start

九、使用webpack外掛

* 常用的外掛
    * 使用html-webpack-plugin根據模板html生成引入script的頁面
    * 使用clean-webpack-plugin清除dist資料夾
    * 使用uglifyjs-webpack-plugin壓縮打包的js檔案
  * 下載
    ```
    npm install --save-dev  html-webpack-plugin clean-webpack-plugin
    ```
  * webpack配置

        const HtmlWebpackPlugin = require('html-webpack-plugin'); //自動生成html檔案的外掛
        const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的檔案   
        plugins: [
          new HtmlWebpackPlugin({template: './index.html'}), //根據模板頁面生成一個新的頁面
          new CleanWebpackPlugin(['dist']),
        ]

  * 建立頁面: index.html

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>webpack test</title>
        </head>
        <body>
        <div id="app"></div>
        <!--打包檔案將自動通過script標籤注入到此處-->
        </body>
        </html>