webpack的基本使用

一、什麼是webpack

概念： webpack是前端工程化的具體解決方案

主要工能： 它提供了友好的 前端子產品化開發 支援，以及 **代碼壓縮混淆、處理浏覽器端Javascript的相容性、性能優化 ** 等強大的功能。

二、webpack的基本使用

1. 在項目根目錄中，建立名為

   webpack.config.js

   的webpack配置檔案，并初始化如下的基本配置：

module.exports = {
    //webpack的運作模式，可選擇development和production
    //development：開發階段選擇
    //production：項目釋出階段使用
    mode: 'development'
}
           

1. 在

   package.json

   的

   scripts

   節點下新增dev腳本

   "scripts": {
       "dev": "webpack"
     },
              

   **script下的腳本可以通過

   npm run

   執行 如

   npm run dev

   **
2. 在終端中運作

   npm run dev

   指令，啟動webpack進行項目的打包建構

webpack.config.js檔案的作用

1. webpack.config.js

   是

   webpack

   的配置檔案。webpack在真正開始打包建構之前，會先讀取這個配置檔案，進而基于給定的配置，對項目進行打包。

   注意： 由于

   webpack

   是基于

   node.js

   開發出來的打包工具，是以在它的配置檔案中，支援使用

   node.js

   相關的文法和子產品進行

   webpack

   的個性化配置。

webpack 中的預設約定

在webpack 4.x和5.x的版本中，有如下的預設約定：

• 預設的打包入口檔案為src-> index.js
• 預設的輸出檔案路徑為dist-> main.js
• **注意：**可以在

  webpack.config.js

  中修改打包的預設約定

自定義打包的入口與出口

在

webpack.config.js

配置檔案中，通過

entry

節點指定打包的入口。通過

output

節點指定打包的出口。

三、webpack中的插件

1. 插件的作用

通過安裝和配置第三方的插件，可以拓展webpack的能力，進而讓webpack用起來更友善。最常用的webpack插件有如下兩個：

webpack-dev-server

• 類似于node.js階段用到的nodelmon工具
• 每當修改了源代碼，webpack會自動進行項目的打包和建構

html-webpack-plugin

• webpack中的HTML插件（類似于一個模闆引擎插件）
• 可以通過此插件自定制index.html頁面的内容

安裝webpack-dev-server

1. npm i install [email protected] -D

2. 配置

   webpack-dev-server

修改

package.json-> scripts

中的dev指令如下：

"scripts": {
    "dev": "webpack serve"
  },
           

再次運作

npm run dev

指令，重新進行項目的打包

注意：webpack-dev-server會啟動一個實時打包的http伺服器

安裝html-webpack-plugin

1. npm install [email protected] -D

2. 配置

   html-webpack-plugin

1. 解惑

   html-webpack-plugin

   • 通過HTML插件複制到項目根目錄中的index.html頁面，也被放到了記憶體中
   • HTML插件在生成的index.html頁面，自動注入了打包的bundle.js檔案

devServer節點

在webpack.config.js配置檔案中，可以通過devserver節點對webpack-dev-server插件進行更多的配置，

注意：凡是修改了webpack.config.js配置檔案，或修改了package.json配置檔案，必須重新開機實時打包的伺服器，否則最新的配置檔案無法生效！

四、webpack中的loader

在實際開發過程中，webpack預設隻能打包處理以.jsl字尾名結尾的子產品。其他非js字尾名結尾的子產品，webpack預設處理不了，需要調用loader加載器才可以正常打包，否則會報錯！、

loader加載器的作用：協助webpack打包處理特定的檔案子產品。比如：

• css-loader可以打包處理.css相關的檔案
• less-loader可以打包處理.less相關的檔案
• babel-loader可以打包處理webpack無法處理的進階J5文法

打包處理css檔案

1. 運作

   npm i [email protected] [email protected]

   指令，安裝處理css檔案的loader
2. 在

   webpack.config.js的module-> rules

   數組中，添加loader規則如下：

其中，test表示比對的檔案類型，use表示對應要調用的loader

注意：

• use數組中指定的loader順序是固定的
• 多個loader的調用順序是：從後往前調用

1. webpack預設隻能打包處理.js結尾的檔案，處理不了其它字尾的檔案
2. 由于代碼中包含了index.css這個檔案，是以webpack預設處理不了
3. 當webpack發現某個檔案處理不了的時候，會查找webpack.config.js這個配置檔案.看module.rules數組中，是否配置了對應的loader加載器.
4. webpack把index.css這個檔案，先轉交給最後一個loader進行處理（先轉交給css-loader）
5. 當ess-loader處理完畢之後，會把處理的結果，轉交給下一個loader（轉交給style-loader）
6. 當style-loader處理完畢之後，發現沒有下一個loader7，于是就把處理的結果，轉交給了webpack
7. webpack把style-loader處理的結果，合并到/dist/bundle.js中，最終生成打包好的檔案.

打包處理less檔案

• 運作

  npm i [email protected] [email protected]

  指令
• 在

  webpack.config.js的module-> rules

  數組中，添加loader規則如下：

打包處理樣式表中與url路徑相關的檔案

運作

npm i [email protected] [email protected] -D

指令

在

webpack.config.js的module-> rules

數組中，添加loader規則如下：

其中？之後的是loader的參數項：

• limit用來指定圖檔的大小，機關是位元組（byte）
• 隻有小于等于limit大小的圖檔，才會被轉為base64格式的圖檔

打包處理js檔案中的進階文法

webpack隻能打包處理一部分JavaScript文法，對于那些無法處理的進階的js文法，需要借助于

babel-loader

進行打包處理。

運作

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

• 配置babel-loader
• 在項目根目錄下，建立名為babel.config.js的配置檔案，定義Babel的配置

• 

打包釋出

配置package.json檔案scripts節點下，新增

清除檔案夾

運作

npm i --save-dev clean-webpack-plugin

指令

• 配置檔案
• 在webpack.config.js中

Sourcs Map