webpack簡單實用說明及應用

首先小huihui推薦使用 yarn 包管理器，與 npm 類似，可用于下載包，優點就是更快，安全可靠，

詳情見官網： Yarn 中文檔案

下載見：安裝 | Yarn 中文檔案

==不要安到帶中文的路徑下, 建議在C盤/==

一、webpack基本概念

就是 node 的一個第三方模塊包，用于打包代碼，詳見官網：webpack

1. webpack能做什么？
   把很多個檔案打包整合在一起，縮小專案的體積，提高加載速度，
2. 功能
   
   

• 支持所有型別檔案的打包
• 支持less/sass=>css
• 支持ES6/7/8=>ES5
• html/css/js => 壓縮合并

二、準備作業

1. 初始化包環境，得到package.json檔案

yarn init

2. 下載webpack等模塊

yarn add webpack webpack-cli -D

3. 在package.json自定義命令，為打包做準備

三、webpack配置

默認配置

• 默認入口
  ./src/index.js
• 默認出口
• ./dist/main.js
• webpack組態檔
  1.新建src并列處，新增檔案webpack.config.js
  2.填入配置項

  const path = require("path")
  
  module.exports = {
      entry: "./src/main.js", // 入口
      output: { 
          path: path.join(__dirname, "dist"), // 出口路徑
          filename: "bundle.js" // 出口檔案名
      }
  }

  3.修改package.json自定義打包命令

  "scripts":{
      "build":"webpack"
  }

  4.終端打包并實驗效果

  yarn build

四、打包流程圖

五、打包所需插件檔案及簡單使用

插件使用原因：webpack默認只認識 js 檔案和 json檔案

1. 自動生成html檔案：HtmlWebpackPlugin | webpack 中文網
   -下載：

   yarn add html-webpack-plugin -D

   -對webpack.config.js配置：

   // 引入自動生成 html 的插件
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const path = require('path');
   
   module.exports = {
     entry: 'index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'index_bundle.js',
     },
     plugins: [new HtmlWebpackPlugin()],
   };

   -重新打包并查看是否在dist檔案下多出html檔案

2. 打包css檔案：style-loader | webpack 中文檔案
   css-loader | webpack 中文檔案
   -安裝依賴包:

   yarn add style-loader css-loader -D

   -對webpack.config.js配置:

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/i,
           use: ["style-loader", "css-loader"],
         },
       ],
     },
   };

   -引入入口檔案 (因為這里是入口需要產生關系, 才會被webpack找到打包起來)

3. import "./css/index.css" //css檔案所在路徑

   -運行打包后的html檔案查看效果

4. 打包less檔案：less-loader | webpack 中文檔案
   -安裝依賴包

   yarn add less less-loader -D

   -webpack.config.js配置

   module.exports = {
     module: {
       rules: [
         {
           test: /\.less$/i,
           loader: [
             // 使用less-loader, 讓webpack處理less檔案, 內置還會用less翻譯less代碼成css內容     
             'style-loader',
             'css-loader',
             'less-loader',
           ],
         },
       ],
     },
   };

   -引入到入口檔案中

   import "./less/index.less"  //less檔案所在路徑

   -打包并運行查看結果

5. 處理圖片及字體檔案：資源模塊 | webpack 中文檔案
   注意：如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可
   詳見查看：資源模塊 | webpack 中文檔案
   如果是webpack4及以前查看配置： https://webpack.docschina.org/loaders/url-loader/
   https://webpack.docschina.org/loaders/file-loader/
   與之前步驟相同，查看檔案即可，
   
   總結: url-loader和file-loader 可以打包靜態資源檔案
6. 處理高版本js語法：Babel 中文網 · Babel - 下一代 JavaScript 語法的編譯器
   問題：webpack 默認僅內置了 模塊化的 兼容性處理 import export
   解決：讓webpack配合babel-loader 對js語法做處理 babel-loader | webpack 中文檔案
   -安裝包

   yarn add -D babel-loader @babel/core @babel/preset-env

   -配置

   module: {
     rules: [
       {
           test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
           use: {
               loader: 'babel-loader',
               options: {
                   presets: ['@babel/preset-env'] // 預設:轉碼規則(用bable開發環境本來預設的)
               }
           }
       }
     ]
   }

   -在入口函式中使用箭頭函式等高版本js代碼

   // 高級語法
   const fn = () => {
     console.log("Hello World！");
   }
   console.log(fn) // 這里必須列印不能呼叫/不使用, 不然webpack會精簡成一句列印不要函式了/不會編譯未使用的代碼
   // 沒有babel集成時, 原樣直接打包進lib/bundle.js
   // 有babel集成時, 會翻譯成普通函式打包進lib/bundle.js

   -打包后觀察js專案，會被轉換成普通函式使用，就是進行了babel降級翻譯的功能，