概念：前端項(xiàng)目工程化的具體解決方案

功能：代碼壓縮混淆、處理瀏覽器端Javascript 兼容性、性能優(yōu)化

webpack構(gòu)建
1、新建空目錄，npm init -y 初始化包管理配置文件package.json

2、新建s r c源碼目錄

3、新建 src -> index.html首頁(yè) index.js 腳本文件

4、初始化首頁(yè)基本結(jié)構(gòu)

5、模塊導(dǎo)入
① -S || --save 將引入的包記錄到dependencies下。 dependencies -> 依賴關(guān)系 項(xiàng)目開(kāi)發(fā)階段需要使用上線部署也需要
② -D || --save-dev 將包引入到目錄 devDependencies -> 開(kāi)發(fā)依賴。 項(xiàng)目開(kāi)發(fā)階段需要使用，上線部署后不需要

webpack基本使用
1、導(dǎo)入npm install webpack@5.42.1 web pack-cli@4.7.2 -D

2、插件使用-配置loader加載文件
① Webpack-dev-server 自動(dòng)構(gòu)建插件
npm install html-webpack-plugin@5.3.2 -D
② 打包處理c s s文件

{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ```
③ 打包處理less文件
``` npm i less-loader@10.0.1 less@4.1.1 -D
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']} ```
④ 配置圖片加載loader
``` npm i url-loader@4.1.1 file-loader@6.2.0 -D
{ test: /\.jpg|.png|.gif$/, use: 'url-loader?limit=2999' }  // 只有<=limit大小的才會(huì)被轉(zhuǎn)base64存儲(chǔ) ``` 
⑤ JavaScript高級(jí)語(yǔ)法需要借助babel-loader打包處理
``` npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
// exclude指定排除項(xiàng)， 目錄下的第三方包不需要被打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node-modules/ } ```
⑥  解析裝飾器的語(yǔ)法, 創(chuàng)建babel.config.js文件,設(shè)置babel配置
``` module.exports = {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ]
  } ```