Webpack简介及打包演示

龙猫蓝图2023-10-30 2:06

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

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

  3. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

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

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

  2. 为何不学 vite？

    现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用

  3. 体验 Webpack 打包 2 个 JS 文件内容

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

  5. 步骤：

    1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

      bash 复制代码 
      npm init -y

    2. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

      • src/utils/check.js

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

      • src/index.js

        js 复制代码 
        /**
 * 目标1：体验 webpack 打包过程
 */
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果（npm run 自定义命令）

    3. 下载 webpack webpack-cli 到项目（版本独立）

      bash 复制代码 
      npm i webpack webpack-cli --save-dev

      注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用


    4. 项目中运行工具命令，采用自定义命令的方式（局部命令）

    bash 复制代码 
    npm run build

    npm run 自定义命令名字

    注意：实际上在终端运行的是 build 右侧的具体命名

    1. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

  6. 需求最终流程图：

    执行完打包流程后，会在项目下生产dist/main.js

js 复制代码 
(()=>{"use strict";console.log(!0),console.log(!1)})();

这是编译完的结果，从index.js开始执行编译，调用对应的check方法，check方法所产生的结果已经展示在编译后的文件中，所以这两个check方法就不会再整合到dist文件中了。

Webpack 修改入口和出口

  1. 使用Webpack默认的打包入口路径是从./src/index.js开始的，打包后的文件默认输出位置为：./dist/main.js。

  2. Webpack 配置：影响 Webpack 打包过程

  3. 步骤：

    1. 项目根目录，新建 Webpack.config.js 配置文件

    2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

      js 复制代码 
      const path = require('path')

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

    3. 重新打包就能发现效果

案例-用户登录-长度判断

目标

体验前端项目代码，如何被 Webpack 打包和使用

讲解

  1. 需求：点击登录按钮，判断手机号和验证码长度是否符合要求

  2. 步骤：

    1. 新建 public/login.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）

    2. 核心 JS 代码写在 src/login/index.js 文件

      js 复制代码 
      /**
 * 目标3：用户登录-长度判断案例
 *  3.1 准备用户登录页面
 *  3.2 编写核心 JS 逻辑代码
 *  3.3 打包并手动复制网页到 dist 下，引入打包后的 js，运行
 */
// 3.2 编写核心 JS 逻辑代码
document.querySelector('.btn').addEventListener('click', () => {
  const phone = document.querySelector('.login-form [name=mobile]').value
  const code = document.querySelector('.login-form [name=code]').value

  if (!checkPhone(phone)) {
    console.log('手机号长度必须是11位')
    return
  }

  if (!checkCode(code)) {
    console.log('验证码长度必须是6位')
    return
  }

  console.log('提交到服务器登录...')
})

    3. 运行自定义命令，让 Webpack 打包 JS 代码

    4. 手动复制 public/login.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/login.html 在浏览器查看效果

小结

由于Webpack默认只会打包js资源，html并不会打包进入，生成的打包js会放在dist中，html要想调用打包后的js也需要放到dist文件夹中，并且通过<script>引入js。

Webpack 自动生成 html 文件

  1. 让 Webpack 拥有自动生成 html 文件能力，并引入打包后的其他资源

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

  3. 步骤：

    1. 下载 html-webpack-plugin 本地软件包到项目中

      bash 复制代码 
      npm i html-webpack-plugin --save-dev

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

      js 复制代码 
      // ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

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

    3. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源，所以在dist中自动生成的html文件中对js等资源的引用并不需要去修改。

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

Webpack-打包 css 代码

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

  2. 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

      js 复制代码 
      /**
 * 目标5：打包 css 代码
 *  5.1 准备 css 代码，并引入到 js 中
 *  5.2 下载 css-loader 和 style-loader 本地软件包
 *  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能
 *  5.4 打包后观察效果
 */
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

      注意：这里只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

    2. 下载 css-loader 和 style-loader 本地软件包

      bash 复制代码 
      npm i css-loader style-loader --save-dev

    3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

      js 复制代码 
      // ...

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

    4. 打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上，注意在dist中并不会直接生成css的文件，而是直接将样式效果加载到html代码中。

优化-提取 css 代码

让 Webpack 能够提取 css 代码到独立的 css 文件中

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

  2. 需要：mini-css-extract-plugin 插件来实现

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

      js 复制代码 
      import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

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

      bash 复制代码 
      npm i --save-dev mini-css-extract-plugin

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

      js 复制代码 
      // ...
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()
  ]
};

    4. 打包后观察效果

    5. 注意：不能和 style-loader 一起使用

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

优化压缩过程

把单独提取的 css 文件内代码压缩

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

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

      bash 复制代码 
      npm i css-minimizer-webpack-plugin --save-dev

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

      js 复制代码 
      // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

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

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

Webpack-打包 less 代码

让 Webpack 拥有打包 less 代码功能

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

  2. 步骤：

    1. 新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

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

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

      js 复制代码 
      /**
 * 目标8：打包 less 代码
 *  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
 *  8.2 下载 less 和 less-loader 本地软件包
 *  8.3 配置 webpack.config.js 让 Webpack 拥有功能
 *  8.4 打包后观察效果
 */
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

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

      bash 复制代码 
      npm i less less-loader --save-dev

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

      js 复制代码 
      // ...

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

    5. 打包后运行 观察效果

Webpack-打包图片

让 Webpack 支持图片等资源打包

讲解

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

  2. 步骤：

    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 图片

      js 复制代码 
      /**
 * 目标9：打包资源模块（图片处理）
 *  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
 *  9.2 打包后观察效果和区别
 */
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

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

      js 复制代码 
      // ...

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

    5. 打包后运行观察效果

相关推荐
neter.asia3 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
~甲壳虫3 分钟前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
光影少年22 分钟前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_24 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu108301891126 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾27 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu29 分钟前
前端 Canvas 绘画 总结
前端
Beamon__32 分钟前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus
CodeToGym34 分钟前
Webpack性能优化指南：从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫35 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play