Vue學習第八章-webpack的使用

一、瞭解webpack

作用： 進行模塊化打包，他會分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用
工作方式： 把你的項目當做一個整體，通過一個給定的主文件（如：index.js）,Webpack將從這個文件開始,找到你的項目的所有依賴文件,使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
其爲了正常運行必須依賴於node
而node環境必須包含各種依賴的包
所以需要npm工具(nodepackage manage)來幫忙管理

---

二、使用webpack

開始之前先介紹幾個文件

package.json：通過npm init命令自動生成。此文件文件裏記錄項目的描述信息：項目作者、項目描述、項目依賴哪些包、插件配置信息等。
webpack.config.js：手動生成。配置webpack各種信息操作的文件。

---

開始使用:

第一： 創建webpack.config.js文件。並設置出入口(後期可添加一些自己想要的配置)

//commonjs的導入方式
const path = require('path') //導入node下的path

module.exports = {
    entry:'./src/mmm.js', //告訴webpack以哪個文件作爲入口。可以是一個對象(裏面包含多個入口)
    output:{ // 出口
        path:path.resolve(__dirname, 'dist'), // 使用絕對路徑，告訴webpack把項目打包到哪裏
        filename:'bundle.js' // 打包後的文件名
    },
    mode:"development"  // 設置模式，後面會提到
}

第二： 執行終端 npm init創建package.json。也可以使用npm init -y 跳過創建時提問的問題(文件夾有中文則不可以)
第三： 執行終端 webpack --mode development 。
wenpack有兩個打包模式：
生產環境production(默認)，不可以debug等操作，發佈項目時候可以用這個命令打包。
開發環境development ，程序員測試代碼的時候用這個命令。webpack --mode development。可以在config配置文件中設置mode:“development”，則可以使用webpack代替webpack --mode development命令

三、webpack配置loader

loder:是webpack用來預處理模塊的，在一個模塊被引入之前，會預先使用loader處理模塊的內容
爲什麼要使用loader呢？因爲默認webpack只會處理js代碼，所以當我們想要去打包其他內容時，讓webpack處理其他類型的內容，就要使用相應的loader，loder也可以理解成一個轉換器。

---

loder使用過程
1：通過npm安裝需要使用的loder(大部分webpack官網可以找到)
2：在config文件中的module進行配置

module: { //例如配置css-loader
    rules: [
      {
        test: /\.css$/,
        use: [
          //css-loader只負責將css文件進行加載，style-loder負責將樣式添加到dom中
          //webpack使用多個loder時是從右向左的
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }

四、webpack配置plugin

plugin：插件，用來擴展webpack。
配置步驟：

    1.npm install 對應的plugin(大部分官網可以找到)
    2.在webpack配置文件中配置plugin:[new 對應的plugin]

常見插件:

HtmlWebpackPlugin        打包index.html
UglifyjsWebpackPlugin    壓縮js
webpack-dev-sever       搭建本地服務器

五、小補充

npm簡單命令的使用：

1. npm -v 查看 npm 的版本
2. npm install [選項] XXX(包名) 安裝所需要的包
       選項可使用的值：
           --save 或 -S 表示在 package.json 文件中（dependencies）記錄下載包的版本信息；即下載生產依賴包，打包的時候會把此包打包出去
           --save-dev或-D 下載開發依賴包,只會在程序員開發的時候此包纔有用，打包的時候不會將此包打包出去
           -g全局安裝模塊
3. npm init 初始化
   更詳細的npm操作請看文檔：npm文檔

---

vue內部的大致執行過程：
template-> ast(抽象語法樹)-> render函數-> virtual dom-> 真實DOM(UI)
runtime-compiler的執行過程：
template-> ast-> render-> vdom-> ui
runtime-only的執行過程：
render-> vdom-> ui
綜上所述：

runtime-only的性能更好，代碼量更少(小6kb),常用