webpack是當前前端最熱門的前端資源模塊化管理和打包工具之一，

基于node.js環境，提供前端模塊化支持，代碼壓碩訓淆，處理瀏覽器端JavaScript兼容性，性能優化等，

專案中使用了webpack工具并且正常配置之后，我們就可以輕松使用模塊化語法 import/export，less語法, es6轉es5等等，讓開發變得簡單起來，

webpack官方檔案：概念 | webpack 中文檔案

?? 要安裝webpack之前，必須保證電腦中已經安裝了node.js， Node.js可以使用npm安裝各種插件，

目錄

一. 基本配置

1.nodeJs官網 按電腦配置直接下載即可；

2.安裝完成后在cmd命令中輸入 node -v, 可以看到node版本號即表示安裝成功，

3. npm init -y 生成package.json組態檔

4. 專案中安裝webpack（如果是webpack 4.0及以上版本，在安裝webpack的同時還需要安裝webpack-cli）

5.在專案根目錄下創建webpack.config.js組態檔，并初始化基本配置

6.在package.json的scripts節點下，新增dev腳本,在終端中執行 npm run dev命令時，就會啟動webpack進行專案的打包構建.

二. 熱部署等常見插件

1. 安裝webpack熱部署插件，自動打包和構建

2. webpack.config.js中配置devServer(自動在瀏覽器中打開服務地址和指定埠號)

三. loader加載器

四. 打包發布

1. build打包發布

2.打包發布時自動清除目錄中的舊檔案

五. 定位error代碼位置（source map）及配置全域路徑（@）

1. 定位error代碼位置 - source map

2. 配置@指定檔案目錄標識

一. 基本配置

1.nodeJs官網 按電腦配置直接下載即可；

2.安裝完成后在cmd命令中輸入 node -v, 可以看到node版本號即表示安裝成功，

3. npm init -y 生成package.json組態檔

4. 專案中安裝webpack（如果是webpack 4.0及以上版本，在安裝webpack的同時還需要安裝webpack-cli）

npm install webpack webpack-cli -D

5.在專案根目錄下創建webpack.config.js組態檔，并初始化基本配置

module.exports = {
    mode:'development' // development是開發環境， production是生產環境
}

6.在package.json的scripts節點下，新增dev腳本,在終端中執行 npm run dev命令時，就會啟動webpack進行專案的打包構建.

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

PS： 此時我們可以在js中使用import語法，如src目錄下當前有index.js和math.js, math.js中暴露出了add方法：

export function add(a,b){ return a+b}

index.js中可以這樣引入了：

import { add } from './math.js'

console.log(add(2,3))

執行 npm run dev命令（webpack就會將一些語法import和export瀏覽器不太兼容的語法轉為可識別的）：

- 默認webpack會將src目錄下面的檔案進行壓縮，會生成一個dist檔案，里面有一個main.js. （此時index.html中直接引入 dist/main.js就能正常看到想要的效果了）

- 指定打包入口，出口 (webpack.config.js里配置)

const path = require('path') // 指定專案路徑
module.exports = {
    mode:'development',
    // 指定要處理那個檔案
    entry: path.join(__dirname,'./src/index.js'),
    // 指定要放到的目錄和生成的檔案名
    output:{
        path:path.join(__dirname,'dist'),
        filename:'js/main.js'
    },
}

二. 熱部署等常見插件

1. 安裝webpack熱部署插件，自動打包和構建

(上面1-6步操作為基本操作，我們會發現每次更新了js都要重新運行 npm run dev發布，非常的不方便，熱部署就很有必要了，)

- 安裝 webpack-dev-server （類似于node.js階段用到的nodemon工具，源代碼有更新，自動打包和構建）

1. 安裝： npm install webpack-dev-server@3.11.2 -D. ( 注意： 高版本的可能會報錯)
2. 配置package.json 檔案中的scripts: "dev": "webpack serve"
3. 執行命令： npm run dev

   "dev":"webpack serve"

?? webpack server此時生成的js存放在了記憶體中而非磁盤中，所以在系統檔案中看不到， html參考要直接參考，如：‘/js/bundle.js’

- 安裝 html-webpack-plugin

（假設index.html在src下面，則服務啟動之后還要進入src才能看到界面，所以需要html-webpack-plugin來復制一份到根目錄）

1. 安裝： npm install html-webpack-plugin@5.3.2 -D
2. 在webpack.config.js里配置

const path = require('path') // 指定專案路徑
const HtmlPlugin = require('html-webpack-plugin') // 匯入html
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定源檔案的存放路徑
    filename: './index.html' // 指定生成的檔案存放路徑
})
module.exports = {
    mode: 'development',
    // 指定要處理那個檔案
    entry: path.join(__dirname, './src/index.js'),
    // 指定要放到的目錄和生成的檔案名
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/main.js'
    },
    plugins:[htmlPlugin]
}

3. npm run dev
?? 此時啟動服務之后直接就能看到index.html, 在目錄檔案中看不到，因為是在記憶體里, html里的js也不需要手動引入，該服務會在記憶體中的index.html里自動引入同目錄的js

2. webpack.config.js中配置devServer(自動在瀏覽器中打開服務地址和指定埠號)

devServer:{
  open:true,
  port:3000,
  host:'127.0.0.1'
}

三. loader加載器

在實際開發中，webpack只能打包處理.js格式的檔案，如果非.js后綴的檔案，就要看是否配置里對應的loader (如： import './index.css' ，不配置css loader則js中無法引入)
(在webpack.config.js中配置)

配置方法：

需要在webpack.config.js的module.exports中配置，增加module物件（所有第三方檔案模塊的匹配規則都放在這里），然后把規則放到rules陣列中，如css loader：

module:{
  // 所有第三方檔案模塊的匹配規則
  rules:[
     {test:/\.css$/,use:['style-loader','css-loader']},
  ],
}

常見的配置：

1. css loader
安裝：npm i style-loader css-loader -D
配置：{test:/\.css$/,use:['style-loader','css-loader']}
2. less loader
安裝：npm i less-loader less -D
配置：{test:/\.less$/,use:['style-loader','css-loader','less-loader']}

3. 圖片 loader
安裝：npm i url-loader file-loader -D
配置：{test:/\.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images''}

PS: limit指定轉成base64位的最低限制byte, 如果圖片小于這個byte則會被轉為base64位， outputPath=images 指定打包后圖片的位置

4. 處理高級js語法 loader
安裝：npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
配置：{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
在根目錄創建babel.config.js并配置
module.exports = {
// 宣告babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

四. 打包發布

1. build打包發布

- 在package.json的scripts里進行配置 ："build":"webpack --mode production"

- 執行打包命令： npm run build

2.打包發布時自動清除目錄中的舊檔案

安裝： npm i clean-webpack-plugin -D

在webpack.config.js中配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins:[new CleanWebpackPlugin()], 

五. 定位error代碼位置（source map）及配置全域路徑（@）

1. 定位error代碼位置 - source map

source map 是一個資訊檔案，里面存盤著位置資訊，有了它，就可以定位到錯誤js的具體位置，而不是打包后的，方便開發程序中的除錯，

在js中故意列印一個沒有定義的變數， 瀏覽器中默認列印出報錯的行數是打包后所在js的位置，不方便定位錯誤代碼：

不做source map時，如下圖定位不到正確位置

配置source map后，準確定位：

在webpack.config.js里配置：devtool:'eval-source-map'
?? 發布的時候建議把該配置去掉或者使用下面的配置，只暴露錯誤的行數在哪里，無法看到js，安全性高： devtool:'nosources-source-map'

2. 配置@指定檔案目錄標識

在webpack.config.js中配置, 例如：下面@代表src源代碼目錄

    resolve :{
        alias:{
            '@':path.join(__dirname,'./src/')
        }
    }

在js中參考：

// import * as math from './js/math.js' 
import * as math from '@/math.js'

webpack中的這些配置，不需要死記硬背， 實際開發程序中，能做到看得懂可以修改配置就可以了，

今天的分享就到這里了，給自己的學習做個筆記，更希望對你有幫助～