1. 为什么要学webpack

  1. 减少代码体积-原有代码体积很大，文件很大，压缩到没有空余空间

  2. 文件的数量减少- 几万个文件合并成几个文件- 转化合并

    脚手架-辅助开发工具-代码量很大，不会被打包到项目中

  3. 提升浏览器访问速度

    绝大多数的框架 vue/react/angular/uni-app-taro 都在使用webpack进行打包

gulp/grunt-只是一个工具，不具备webpack全家桶的能力

  • webpack的生态异常强大

2. webpack是什么

  • 是一个第三方的模块包-打包工具

    作用是： 分析-转化-打包代码

  • 让浏览器可以识别 很多框架的语言 vue-react-less-sass /es7/es8/es10…

要不要百分之百掌握？

  • 面试-
  • vue-uniapp-taro基于webpack进行了深度定制，很多理念和属性是一样的
  • 会查文档就可以了

3. 初始化webpack环境

  1. 新建一个文件夹，初始化项目

    1. $  npm init -y # 一路绿灯的创建一个项目

  2. 安装两个依赖包

    1. $ npm i webpack webpack-cli -D #保存到开发依赖下

  3. 配置执行命令-package.json

    1. "scripts": {
    2.  "build" :  "webpack"
    3. }

4.打包两个js文件为一个js文件

image.png

  1. 没有配置webpack的情况下，默认只能找到src/index.js

    src 是源代码的存放目录，拿到项目先看src

  2. 新建add.js ```javascript // 求和函数 function add(num1, num2) { return num1 + num2 } module.exports = { add, }

  2. 3. 在index.js中引入add.js
  3. ```javascript
  4. const obj = require("./add")
  5. console.log(obj.add(1, 2))
  1. 打包-执行命令
    $ npm run build
    image.png

package.json中的name不能和安装的包名重名-安装失败

npm包-开发了一个模块，放到网上-别人来下载

webpack开发了一个叫webpack的名字放到网上了
个人可以开发包的- 一但别人占用了包名，
image.png

5.修改webpack的配置的入口和出口

默认的入口 src/index.js 默认的出口是 dist/main.js

  1. 新建webpack.config.js- 建在根目录上（和package.json同级的目录）

image.png

  1. 导出一个配置

https://webpack.javascriptc.com/concepts/
image.png

  1. 在webpack.config.js中修改配置 ```javascript const path = require(“path”)

// 导出一个配置 webpack 属于nodejs module.exports = { entry: “./src/main.js”, // 配置入口 output: { // 路径 + 文件名 path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, }


4. 再次执行打包
```bash
$ npm run build

6.隔行换色案例

image.png

  1. 配置环境-参考第三章的初始化环境
  2. 安装jquery,编写隔行换色效果
    $ npm i jquery  # 安装到运行时依赖
  • src/main.js ```javascript import $ from “jquery” $(function () { $(“li:nth-child(odd)”).css(“color”, “red”) //奇数设置成红色 $(“li:nth-child(even)”).css(“color”, “green”) //偶数设置成绿色 })

3. 修改webpack.config.js 
```javascript
const path = require("path")
module.exports = {
  // 导出配置
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
}
  1. 新建public/index.html ```html <!DOCTYPE html>
    • 第1个li标签
    • 第2个li标签
    • 第3个li标签
    • 第4个li标签
    • 第5个li标签
    • 第6个li标签
    • 第7个li标签
    • 第8个li标签
    • 第9个li标签
    • 第10个li标签

5. 执行打包命令
```bash
$ npm run build
  1. 将public下的index.html拷贝到build目录，引入打包好的文件，运行页面看效果 ```html <!DOCTYPE html>
    • 第1个li标签
    • 第2个li标签
    • 第3个li标签
    • 第4个li标签
    • 第5个li标签
    • 第6个li标签
    • 第7个li标签
    • 第8个li标签
    • 第9个li标签
    • 第10个li标签
![image.png](https://cdn.nlark.com/yuque/0/2022/png/8435673/1655524523065-c7ede871-8114-4771-8429-981263246270.png#clientId=u345b0f4a-b88a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=761&id=u849ba920&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1522&originWidth=2274&originalType=binary&ratio=1&rotation=0&showTitle=false&size=437810&status=done&style=none&taskId=ud235fe59-2bb9-45dd-b323-e7493d0ed30&title=&width=1137)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/8435673/1655524543490-c8096539-f780-49b7-90a4-0c629bd04717.png#clientId=u345b0f4a-b88a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=314&id=u801ecc1f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=628&originWidth=660&originalType=binary&ratio=1&rotation=0&showTitle=false&size=77711&status=done&style=none&taskId=ud3f032bb-044b-4d88-904c-b1b59bfb87d&title=&width=330)
<a name="MestT"></a>
## 7.按需导出的全部引入和箭头函数

- 按需导出
```javascript
export const a = 1
export const b = 2
export const c = 3
  • 默认导出
    const d = 4
export default d
    导出
    export const a = 1
export const b = 2
export const c = 3
const d = 4
export default d
    ```javascript import { a,b,c} from ‘地址’ import D from ‘地址’

// 以上代码优化

import D,{ a, b, c } from “地址”

// 导入所有的模块 import * as All from ‘地址’

All.a All.b All.c All.default 是 d


- 按需导出的另外一种写法
```javascript
 const a = 1
 const b = 2
 const c = 3

 export { a, b, c } //按需导出的另外一种写法


export const a = 1
export const b = 2
export const c = 3

  • 箭头函数的实现原理

    function People () {

  const call = function () {
   // this正常情况下 指向调用者
  }

  const call2 = () => {
    // this指向People
    this.name = "张三"
  }
   var _this = this // 将父级作用的this 给了一个变量
   const call2 = function() {
    // this指向People
    _this.name = "张三"
  }
}

    8.使用HtmlPlugin的插件自动生成html-自动引入文件

  1. 安装这个插件

    $ npm i html-webpack-plugin -D

  2. 在webpack.config.js中配置该插件 ```javascript const path = require(“path”) const HtmlPlugin = require(“html-webpack-plugin”) module.exports = { entry: “./src/main.js”, output: { path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, plugins: [ new HtmlPlugin({ template: “./public/index.html”, // 指向要复制的html文件 }), ], // 配置插件 }


<a name="dzTKZ"></a>
## 9.项目中引入css文件去除圆点

1. 新建一个css文件  css/index.css
```css
li {
  list-style: none;
}
  1. 在入口处引入该文件 ```javascript import $ from “jquery” import “./css/index.css” $(function () { $(“li:nth-child(odd)”).css(“color”, “red”) //奇数设置成红色 $(“li:nth-child(even)”).css(“color”, “green”) //偶数设置成绿色 })
![image.png](https://cdn.nlark.com/yuque/0/2022/png/8435673/1655535327375-552f4222-e92f-46b8-a8de-d36b3008650f.png#clientId=u76a2b464-7d08-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=402&id=u5772ceae&margin=%5Bobject%20Object%5D&name=image.png&originHeight=804&originWidth=1754&originalType=binary&ratio=1&rotation=0&showTitle=false&size=340252&status=done&style=none&taskId=ua8a7acf8-1e79-45ee-ab68-9ff52cd0e8e&title=&width=877)

<a name="Ar7xz"></a>
## 10.使用加载器 loader处理css类型

1. 下加载器
```bash
$ npm i style-loader css-loader -D

css-loader让webpack处理css文件，引入css文件

style-loader 让webpack把得到的css样式插入dom中

  1. 给webpack进行配置 ```javascript const path = require(“path”) const HtmlPlugin = require(“html-webpack-plugin”) module.exports = { // 导出配置 entry: “./src/main.js”, output: { path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, plugins: [ new HtmlPlugin({ template: “./public/index.html”, // 指向要复制的html文件 }), ], // 配置插件 module: { rules: [ {
     test: /\.css$/i, // 正则表达式
 use: ["style-loader", "css-loader"], // 顺序不能调整
    }, ], }, }
<a name="c7qp9"></a>
## 11.处理less

1. 安装加载器 less  less-loader
```bash
$ npm i less less-loader -D
  1. 配置到webpack中 ```javascript const path = require(“path”) const HtmlPlugin = require(“html-webpack-plugin”) module.exports = { // 导出配置 entry: “./src/main.js”, output: { path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, plugins: [ new HtmlPlugin({ template: “./public/index.html”, // 指向要复制的html文件 }), ], // 配置插件 module: { rules: [ {
     test: /\.css$/i, // 正则表达式
 use: ["style-loader", "css-loader"], // 顺序不能调整
    }, {
     test: /\.less$/i, // 正则表达式
 use: ["style-loader", "css-loader", "less-loader"], // 顺序不能调整
    }, ], }, }

3. 新建 less/index.less文件 设置字体大小
```less
ul {
  li {
     font-size: 20px
  }

}

12.处理图片资源

webpack5.0内置了一些功能-比如图片资源处理

module.exports = {
  module: {
    // 规则
     rules: [{
        test: /\.(png|gif|jpg|jpeg)$/
        type: 'asset', // 分析你的资源的大小 小于8kb转成base64 大于8kb不转化
     }]
  }
}

webpack 5 不需要针对资源再使用加载器了，原来webpack4还在用配置loader的方式

import $ from "jquery"
import "./css/index.css"
import "./less/index.less"
import HandSome from "./assets/test.jpeg"
// webpack 万物皆模块
$(function () {
  $("li:nth-child(odd)").css("color", "red") //奇数设置成红色
  $("li:nth-child(even)").css("color", "green") //偶数设置成绿色
})
// 创建一个元素
const imgObj = document.createElement("img")
imgObj.src = HandSome // src-路径或者base64 webpack帮我们处理

document.body.appendChild(imgObj) // 追加到元素中

13. webpack处理字体图标

  1. 拷贝准备好的字体图标到src目录下
  2. main.js中新建一个标签 i，设置它的字体图标 ```javascript import $ from “jquery” import “./css/index.css” import “./less/index.less” import HandSome from “./assets/test.jpeg” import “./assets/fonts/iconfont.css” // 引入字体图标的样式 // webpack 万物皆模块 $(function () { $(“li:nth-child(odd)”).css(“color”, “red”) //奇数设置成红色 $(“li:nth-child(even)”).css(“color”, “green”) //偶数设置成绿色 }) // 创建一个元素 const imgObj = document.createElement(“img”) imgObj.src = HandSome // src-路径或者base64 webpack帮我们处理

document.body.appendChild(imgObj) // 追加到元素中

// 创建字体图标的元素 const iObj = document.createElement(“i”) iObj.className = “icon-font icon-weixin” //设置className

document.body.appendChild(iObj) // 追加到元素中


3. 配置webpack
```javascript
const path = require("path")
const HtmlPlugin = require("html-webpack-plugin")
module.exports = {
  // 导出配置
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  plugins: [
    new HtmlPlugin({
      template: "./public/index.html", // 指向要复制的html文件
    }),
  ], // 配置插件
  module: {
    rules: [
      {
        test: /\.css$/i, // 正则表达式
        use: ["style-loader", "css-loader"], // 顺序不能调整
      },
      {
        test: /\.less$/i, // 正则表达式
        use: ["style-loader", "css-loader", "less-loader"], // 顺序不能调整
      },
      {
        test: /\.(png|gif|jpg|jpeg)$/,
        type: "asset", // 小于8kb =》 base64  大于8kb => 路径引用
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: "asset/resource", // 直接输出目录
        // 输出文件-设置文件名
        generator: {
          filename: "fonts/[name].[hash:6][ext]", // [ext]是带.的
        },
      },
    ],
  },
}

14.降级js的处理-兼容低版本的浏览器

  • babel

    结合webpack + babel

使用babel-loader 核心包

  1. 安装 babel的包

    $ npm i  babel-loader @babel/core @babel/preset-env -D

  2. 写一些es6+的代码

    function People() {
const call = () => {
 this.name = "张三"
}
call()
}
console.log(People)

  3. 配置webpack ```javascript const path = require(“path”) const HtmlPlugin = require(“html-webpack-plugin”) module.exports = { // 导出配置 entry: “./src/main.js”, output: { path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, plugins: [ new HtmlPlugin({ template: “./public/index.html”, // 指向要复制的html文件 }), ], // 配置插件 module: { rules: [ {

     test: /\.css$/i, // 正则表达式
 use: ["style-loader", "css-loader"], // 顺序不能调整

    }, {

     test: /\.less$/i, // 正则表达式
 use: ["style-loader", "css-loader", "less-loader"], // 顺序不能调整

    }, {

     test: /\.(png|gif|jpg|jpeg)$/,
 type: "asset", // 小于8kb =》 base64  大于8kb => 路径引用

    }, {

     test: /\.(eot|svg|ttf|woff|woff2)$/,
 type: "asset/resource", // 直接输出目录
 // 输出文件-设置文件名
 generator: {
   filename: "fonts/[name].[hash:6][ext]", // [ext]是带.的
 },

    }, {

     test: /\.m?js$/,
 exclude: /(node_modules|bower_components)/,
 use: {
   loader: "babel-loader",
   options: {
     presets: ["@babel/preset-env"],
   },
 },

    }, ], }, }


<a name="fK32Z"></a>
## 15. webpack开发服务器

1. 如果没有开发服务器，打包 => 生成物理文件

![image.png](https://cdn.nlark.com/yuque/0/2022/png/8435673/1655549053519-aa20b9cc-08f6-450a-8796-0b738d59736a.png#clientId=u944a2132-7103-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=388&id=u91aacd73&margin=%5Bobject%20Object%5D&name=image.png&originHeight=776&originWidth=2194&originalType=binary&ratio=1&rotation=0&showTitle=false&size=150941&status=done&style=none&taskId=u79106ad1-b115-44f7-b9d6-699b3290b06&title=&width=1097)<br />使用vscode插件-live-server启动服务<br />造成资源的浪费-缓慢

2. 开发服务器
> 打包速度快- 再也没有物理文件，而是将文件写入了内存

> 自动开启一个本地服务-类似于vscode中的liveserver, 直接访问地址就可以了

> 热更新-文件发生变化-重新打包-增量的模式-浏览器-直接更新


<a name="Lrwuq"></a>
## 16. 使用webpack-dev-server

1. 安装依赖包
```bash
$ npm i webpack-dev-server -D
  1. 配置启动服务的命令—

    —open会自动打开浏览器

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },

只要改变了webpack的配置，就得重启。

  1. 配置服务器的启动端口（不配也可以-8080） ```javascript const path = require(“path”) const HtmlPlugin = require(“html-webpack-plugin”) module.exports = { mode: “development”, //开发模式 // 导出配置 entry: “./src/main.js”, output: { path: path.resolve(__dirname, “build”), filename: “bundle.js”, }, plugins: [ new HtmlPlugin({ template: “./public/index.html”, // 指向要复制的html文件 }), ], // 配置插件 module: { rules: [ {
     test: /\.css$/i, // 正则表达式
 use: ["style-loader", "css-loader"], // 顺序不能调整
    }, {
     test: /\.less$/i, // 正则表达式
 use: ["style-loader", "css-loader", "less-loader"], // 顺序不能调整
    }, {
     test: /\.(png|gif|jpg|jpeg)$/,
 type: "asset", // 小于8kb =》 base64  大于8kb => 路径引用
    }, {
     test: /\.(eot|svg|ttf|woff|woff2)$/,
 type: "asset/resource", // 直接输出目录
 // 输出文件-设置文件名
 generator: {
   filename: "fonts/[name].[hash:6][ext]", // [ext]是带.的
 },
    }, {
     test: /\.m?js$/,
 exclude: /(node_modules|bower_components)/,
 use: {
   loader: "babel-loader",
   options: {
     presets: ["@babel/preset-env"],
   },
 },
    }, ], }, devServer: { port: 8888, }, }

```