使用框架前对webpack的基本认知

01.webpack简介

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

📌只有和入口有直接/间接引入关系的模块，才会被打包

Webpack 的作用：把静态模块内容，压缩，转译等（前端工程化）

• 把 less/sass 转成 css 代码
• 把 ES6+ 降级成 ES5 等
• 支持多种模块文件类型，多种模块标准语法

02.通过案例体验webpack

需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包

实现步骤：

1. 新建项目文件夹 Webpack_study，npm init -y初始化包环境，得到 package.json 文件
2. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6 src/utils/check.js

import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123')) src/index.js

1. 下载 webpack webpack-cli 到项目（版本独立）：npm i webpack webpack-cli --save-dev，在package.json中的script字段中添加自定义命令："build":"webpack"作为局部启动命令。

📌 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，可以下载到项目中单独使用

1. 项目中运行工具命令，采用自定义命令的方式（局部命令）进行打包：npm run build
2. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

03.Webpack 修改入口和出口

Webpack 配置：影响 Webpack 打包过程。

webpack的配置是可以修改的，可以通过各种配置和插件，让webpack功能增强。webpack的插件和配置很多，具体的要多阅读文档，多实践才能灵活运用。

步骤：

1. 项目根目录，新建 webpack.config.js 配置文件
2. 导出配置对象，配置入口，出口文件路径

const path = require('path')

module.exports = {
 // 入口
  entry: path.resolve(__dirname, 'src/login/index.js'),
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
  }
} webpack.config.js

04.Webpack 自动生成 html 文件

插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源。

使用了这个插件，webpack可以根据public目录下的模板文件自动生成对应的html文件。

步骤：

1. 下载 html-webpack-plugin 本地软件包到项目中 npm i html-webpack-plugin --save-dev
2. 配置 webpack.config.js 让 Webpack 拥有插件功能

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板文件
      filename: './login/index.html' // 输出文件
    })
  ]
}

指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

05.Webpack-打包 css 代码

Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

加载器 css-loader：解析 css 代码

加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

1. 准备 css 文件引入到 src/login/index.js 中

import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

1. 下载 css-loader 和 style-loader 本地软件包 npm i css-loader style-loader --save-dev
2. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
}

1. 打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

06.优化-提取 css 代码

打包好的css代码会和html，js等在一个文件中，可以通过插件来优化，把css单独提取出来。

好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

需求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中

步骤：

1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i --save-dev mini-css-extract-plugin

1. 配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin()
  ]
}

1. 打包后观察效果

📌该插件不能和 style-loader加载器 一起使用

07.优化压缩过程

提取出来的css代码没有压缩，体积较大，需要通过插件将提取出来的css进行压缩

步骤：

1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i css-minimizer-webpack-plugin --save-dev

1. 配置 webpack.config.js 让 Webpack 拥有该插件功能

// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
}

1. 打包后观察 css 文件内自己代码是否被压缩了

08.Webpack-打包 less 代码

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

步骤：

1. 新建 login/index.less 文件，设置背景图样式

html {
  body {
    background: url('./assets/login-bg.png') no-repeat center/cover;
  }
}

1. less 样式引入到 src/login/index.js 中

import './index.less'

1. 下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

1. 配置 webpack.config.js 让 Webpack 拥有功能

// ...

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

1. 打包后运行 观察效果

09.Webpack-打包图片

资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

步骤：

1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

   占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

   占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

   占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

2. 判断临界值默认为 8KB

   大于 8KB 文件：发送一个单独的文件并导出 URL 地址

   小于 8KB 文件：导出一个 data URI（base64字符串）

3. 在 src/login/index.js 中给 img 标签添加 logo 图片

import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

// ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

1. 打包后运行观察效果

10.Webpack 搭建开发环境

每次改动代码，都要重新打包，很麻烦，给项目集成 webpack-dev-server 开发服务器可以启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

步骤：

1. 下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

1. 配置自定义命令，并设置打包的模式为开发模式

module.exports = {
  // ...
  mode: 'development'
}

"scripts": {
  // ...
  "dev": "webpack serve --mode=development"
},

1. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

11.Webpack 打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

分类：

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

开发模式注重代码热替换更快，让开发调试代码更便捷

生产模式注重项目体积更小，更轻量，适配不同的浏览器环境

设置影响 Webpack：

方式1：在 webpack.config.js 配置文件设置 mode 选项

module.exports = {
  // ...
  mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数

"scripts": {
  "build": "webpack --mode=production",
  "dev": "webpack serve --mode=development"
}

📌命令行设置的优先级高于配置文件中的，推荐用命令行设置

12.Webpack 打包模式的应用

在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

方案2是最常用的，使用步骤：

1. 下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

1. 配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
  }

1. 在 webpack.config.js 区分不同环境使用不同配置

module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      }
    ],
  }

13.Webpack 前端注入环境变量

前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

解决：使用 Webpack 内置的 DefinePlugin 插件

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

配置 webpack.config.js 中给前端注入环境变量

// ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

14.Webpack 开发环境调错 source map

source map：可以准确追踪 error 和 warning 在原始代码的位置

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

设置：webpack.config.js 配置 devtool 选项

、-module.exports = {
  // ...
  devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

📌source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

15.Webpack 设置解析别名路径

解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单

原来路径如下：

import { checkPhone, checkCode } from '../src/utils/check.js'

配置：在 webpack.config.js 中设置解析别名

// ...

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

修改原路径：

import { checkPhone, checkCode } from '@/utils/check.js'

16.优化-CDN使用

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

CDN定义：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

步骤：

1. 在 html 中引入第三方库的 CDN 地址 并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

1. 配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

const config = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
      useCdn: process.env.NODE_ENV === 'production'
    })
  ]
}


// 生产模式下使用cdn
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让webpack防止import的包被打包进来）
  config.externals = {
    // key：import from语句后的字符串
    // value：留在原地的全局变量（最好和cdn在全局暴露的一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios',
    'form-serialize':'serialize',
    '@wangeditor/editor':'wangEditor'
  }
}
module.exports = config

17.Webpack 多页面打包

单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示

多页面：多个 html 文件，切换页面实现不同业务逻辑展示

步骤：

1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出
2. 下载 form-serialize 包并导入到核心代码中使用
3. 配置 webpack.config.js 多入口和多页面的设置

// ...
const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

18.优化-分割公共代码

把 2 个以上页面引用的公共代码提取

步骤：

配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all',//所有模块动态非动态移入的部分都分割
      cacheGroups: { // 分割组
        commons:{ // 抽取公共模块
          minSize: 0, // 抽取的chunk最小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前chunk包含从主bundle中拆分的模块，则将它重用
          name(module,chunks,cacheGroupKey){ // 分离模块文件名
            const allChunksNames = chunks.map(item=>item.name).join('~') // 模块名1-n
            return `./js/${allChunksNames}` // 输出到dist目录下位置
          }
        }
      }
    }
 }