前端工程化第二章：webpack5基础（中）

news2025/10/29 16:53:58

文章目录

  • 1. 处理css资源（css文件拆分 mini-css-extract-plugin）
    • 1.1. package.json
    • 1.2. webpack.config.js
  • 2. 处理预编译器（less/scss）
    • 2.1. src/index.js
    • 2.2. src/index.less
    • 2.3. src/index.scss
    • 2.4. webpack.config.js
  • 3. 适配（postCss）
    • 3.1. webpack.config.js
    • 3.2. postcss.config.js
    • 3.3. .browserslistrc
    • 3.4. src/index.less
  • 4. 高级语法转换低级语法（babel）
    • 4.1. webpack.config.js
    • 4.2. .babelrc（和babel.config.js文件配置其中一个就行）
    • 4.3. babel.config.js（和.babelrc文件配置其中一个就行）
    • 4.4. src/index.js

1. 处理css资源（css文件拆分 mini-css-extract-plugin）

分析打包后的js文件，可以看到js和css代码都放在同一个文件中，那么如果代码较多时，会导致单个文件过大。因此在实际开发中，我们需要将js和css代码拆分出来，生成单独的css文件。
在这里插入图片描述
实现思路：维护一个全局变量，控制是生产环境还是开发环境，在 webpack.config.js 文件中通过这个变量处理是否拆分 css 文件（生产环境需要拆分）。

1.1. package.json

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

在这里插入图片描述

1.2. webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css代码从js文件中拆分出来
module: {
    rules: [
      {
        test: /\.css$/, // 匹配以 .css 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
        ], // 注意：loader执行顺序是从后往前执行，顺序不能改变
      },
    ],
  },
  plugins: [
    // 插件使用时，像构造函数一样直接 new 即可
    // template：模板文件的路径
    // filename：打包后生成的文件名
    // chunk：代码块
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    new MiniCssExtractPlugin(),
  ],

运行 npm run build 打包项目，可以看到css文件已经生成了：

在这里插入图片描述

2. 处理预编译器（less/scss）

  • less：Less 是一种 CSS 预处理器，它可以让开发人员使用变量、函数等方式来编写 CSS，让 CSS 更加易于维护和扩展。
  • less-loader：Less-loader 是 Webpack 中的一个 Loader，用于将 Less 代码转换为标准的 CSS 代码。然后在浏览器中使用。
  • sass：同 Less 作用一致
  • sass-loader：同 Less-loader 作用一致
  • stylus：同上
  • stylus-loader：同上

2.1. src/index.js

在这里插入图片描述
具体代码如下：

import "./index.css";
import "./index.less";
import "./index.scss";
console.log(123);

2.2. src/index.less

在这里插入图片描述
具体代码如下：

@bgc: yellow;
@color: green;
body {
  background-color: @bgc;
  color: @color;
}

2.3. src/index.scss

在这里插入图片描述
具体代码如下：

$width: 100px;
body {
  width: $width;
}

2.4. webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/, // 匹配以 .css 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
        ], // 注意：loader执行顺序是从后往前执行，顺序不能改变
      },
      {
        test: /\.less$/, // 匹配以 .less 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.scss$/, // 匹配以 .scss 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },

运行 npm run build 后查看生成的css文件，可以看到我们设置的样式已经识别并打包进去了：

在这里插入图片描述
然后我们将dist下的index.html在浏览器打开，可以看到样式已经生效了：

在这里插入图片描述

3. 适配（postCss）

PostCSS 是一个使用 JavaScript 转换 CSS 的工具。它允许开发人员使用现代语法编写 CSS，然后将其转换为旧版浏览器可以理解的格式。PostCSS 支持各种插件，可以用于对 CSS 执行各种转换，例如添加浏览器前缀、优化 CSS 等。

  • postcss.config.js：postcss 的配置文件，可以配置插件等
  • .browserslistrc：配置浏览器的信息

3.1. webpack.config.js

在这里插入图片描述
具体代码如下：

module: {
    rules: [
      {
        test: /\.css$/, // 匹配以 .css 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
        ], // 注意：loader执行顺序是从后往前执行，顺序不能改变
      },
      {
        test: /\.less$/, // 匹配以 .less 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /\.scss$/, // 匹配以 .scss 结尾的文件
        use: [
          process.env.NODE_ENV === "development"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },

3.2. postcss.config.js

在这里插入图片描述
具体代码如下：

module.exports = {
  plugins: [require("autoprefixer")], // 使用 autoprefixer 插件匹配不同的浏览器
};

3.3. .browserslistrc

在这里插入图片描述
具体代码如下：

# 最新的两个版本
last 2 versions
# 市场份额大于1%
> 1%
# iOS 7 以上的 sofire 浏览器
iOS 7
# sofire 浏览器最新的三个版本
last 3 iOS versions

3.4. src/index.less

测试对于较新的语法，postcss 自动添加浏览器前缀：

在这里插入图片描述
运行 npm run build 打包，将打包后的 dist/index.html 在浏览器打开，可以看到前缀已经添加：
在这里插入图片描述

4. 高级语法转换低级语法（babel）

  1. Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 代码，以便在旧版浏览器或环境中运行。

  2. Babel 可以将最新版本的 JavaScript 代码转换为向后兼容的代码，包括将新的语法特性转换为旧版语法，将模块转换为 CommonJS 或 AMD 等模块系统，以及为旧版浏览器添加缺失的原生 API 等。

  3. Babel 可以与 Webpack 等构建工具一起使用，以便在构建过程中自动将代码转换为兼容的 JavaScript 代码。

  4. 要使用 Babel，只需在项目中安装 Babel 的相关依赖，然后在项目根目录下创建一个 .babelrc 文件，指定要使用的 Babel 插件和预设。(Babel的配置非常灵活，可以通过 .babelrc、babel.config.js、Webpack配置等多种方式来指定需要支持的目标环境)

4.1. webpack.config.js

在这里插入图片描述
具体代码如下：

{
  test: /\.js$/, // 匹配以 .js 结尾的文件
  use: [
    {
      loader: "babel-loader",
      // options: { // 可以直接在这里配置预设，也可以在 .babelrc 文件中配置，也可以在babel.config.js 中配置
		//	presets: ["@babel/preset-env"]
		//}
    },
  ],
},

4.2. .babelrc（和babel.config.js文件配置其中一个就行）

在这里插入图片描述
具体代码如下：

{
  "presets": [
      "@babel/preset-env" // 配置 babel 预设
  ]
}

4.3. babel.config.js（和.babelrc文件配置其中一个就行）

module.exports = {
  presets: [
     "@babel/preset-env" // 配置 babel 预设
  ]
}

4.4. src/index.js

测试 babel 代码转换：

在这里插入图片描述
具体代码如下：

// 测试 babel 将 ES6 代码转换为 ES5 代码
let obj = {
  name: "张三",
  age: 18,
};

let { name, age } = obj;
console.log(name, age);

运行 npm run build 后，可以看到 dist/main.js 中已经将测试代码转成了低级语法：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/779376.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【《机器学习和深度学习:原理、算法、实战(使用Python和TensorFlow)》——以机器学习理论为基础并包含其在工业界的实践的一本书】

【《机器学习和深度学习:原理、算法、实战(使用Python和TensorFlow)》——以机器学习理论为基础并包含其在工业界的实践的一本书】

机器学习和深度学习已经成为从业人员在人工智能时代必备的技术，被广泛应用于图像识别、自然语言理解、推荐系统、语音识别等多个领域，并取得了丰硕的成果。目前，很多高校的人工智能、软件工程、计算机应用等专业均已开设了机器学习和深度学习…
阅读更多...
LeetCode55.Jump-Game＜跳跃游戏＞

LeetCode55.Jump-Game＜跳跃游戏＞

题目&#xff1a; 思路&#xff1a; 大神的思路,我是不会... 代码是&#xff1a; //大神的代码code class Solution { public:bool canJump(vector<int>& nums) {int k 0;for (int i 0; i < nums.size(); i) {if (i > k) return false;k max(k, i nums[i…
阅读更多...
Mysql群集MHA高可用配置

Mysql群集MHA高可用配置

目录 一、MHA概述 1.简介 2.MHA 的组成 &#xff08;1&#xff09;MHA Node&#xff08;数据节点&#xff09; &#xff08;2&#xff09;MHA Manager&#xff08;管理节点&#xff09; 3.MHA的特点 二、搭建MHA高可用数据库群集 1.主从复制 &#xff08;1&#xff09;…
阅读更多...
整车总线系列——FlexRay 六

整车总线系列——FlexRay 六

整车总线系列——FlexRay 六 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 没有人关注你。也无需有人关注你。你必须承认自己的价值&#xff0c;你不能…
阅读更多...
iOS--weak的底层

iOS--weak的底层

怎么说 在iOS开发过程中&#xff0c;会经常使用到一个修饰词weak&#xff0c;使用场景大家都比较清晰&#xff0c;避免出现对象之间的强强引用而造成对象不能被正常释放最终导致内存泄露的问题。weak 关键字的作用是弱引用&#xff0c;所引用对象的计数器不会加1&#xff0c;并…
阅读更多...
【自启动配置】Ubuntu 设置开机自启动脚本

【自启动配置】Ubuntu 设置开机自启动脚本

Ubuntu 开机运行的脚本和当前操作系统运行的级别有关&#xff0c;OS 的运行级别大概分为七个 目录 1、查看 OS 运行级别 2、创建自启动脚本 3、添加软链接 1、查看 OS 运行级别 输入命令 runlevel 查看当前系统运行级别。当前系统的运行级别为 5 2、创建自启动脚本 在 /et…
阅读更多...
Linux网络基础 — 数据链路层

Linux网络基础 — 数据链路层

目录 数据链路层 认识以太网 局域网转发的原理 认识以太网的MAC报头 以太网帧格式 认识MAC地址 对比理解MAC地址和IP地址 基于MAC帧协议再次谈一谈局域网转发的原理 认识MTU MTU对IP协议的影响 MTU对UDP协议的影响 MTU对于TCP协议的影响 ARP协议 ARP协议的作用 …
阅读更多...
rust gtk 桌面应用 demo

rust gtk 桌面应用 demo

《精通Rust》里介绍了 GTK框架的开发&#xff0c;这篇博客记录并扩展一下。rust 可以用于桌面应用开发&#xff0c;我还挺惊讶的&#xff0c;大学的时候也有学习过 VC&#xff0c;对桌面编程一直都很感兴趣&#xff0c;而且一直有一种妄念&#xff0c;总觉得自己能开发一款很好…
阅读更多...
Rust之通用编程

Rust之通用编程

1、变量与可变性&#xff1a; 在Rust语言中&#xff0c;变量默认是不可变的&#xff0c;所以一旦变量被绑定到某个值上面&#xff0c;这个值就再也无法被改变。 可以通过在声明的变量名称前添加mut关键字来使其可变。除了使变量的值可变&#xff0c;mut还会向阅读代码的人暗示…
阅读更多...
“C++基础入门指南：了解语言特性和基本语法”

“C++基础入门指南：了解语言特性和基本语法”

C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式 等。熟悉C语言之后&#xff0c;对C学习有一定的帮助 文章目录 C命名风格C关键字(C98)C命名空间命名空间定义命名空间使用命名空间的使用有三种方式&#xff…
阅读更多...
Android - 集成三方模组原厂WiFi Hal库问题

Android - 集成三方模组原厂WiFi Hal库问题

Android - 集成三方模组原厂WiFi Hal库问题 最近Android 11产品平台上需要集成三方WiFi/AP模组厂商提供的hal静态库时遇到一个问题&#xff1a;将三方的库代码集成进系统&#xff0c;并正确配置、编译出lib_driver_cmd_xxx.a(xxx一般是厂商的名字缩写&#xff0c;仅仅是个后缀用…
阅读更多...
gazebo simulation

gazebo simulation

<?xml version"1.0" ?> <!-- --> <!-- | This document was autogenerated by xacro from /home/xrh/ros-project/gazebo_test/src/fmauch_universal_robot/ur_description/urdf/ur3_D455_2f140.urdf.xacro | --> <!-- | EDITING THIS…
阅读更多...
C++---string

C++---string

String C语言中的字符串和C中的string类标准库中的string类string类的常用接口string类对象的常见构造string类对象的容量操作string类对象的访问及遍历操作 C语言中的字符串和C中的string类 在C语言中&#xff0c;字符串是一个字符数组&#xff0c;它以空字符\0结尾&#xff…
阅读更多...
【进程7】 2.15 有名管道介绍及使用 2.16有名管道实现简单版聊天功能

【进程7】 2.15 有名管道介绍及使用 2.16有名管道实现简单版聊天功能

2.15 有名管道介绍及使用 有名管道&#xff08;FIFO first in first out&#xff09; 有名管道也可用于具有亲缘关系的进程之间&#xff0c;底层数据结构也是环形队列、循环队列。 有名管道的使用 unlink用于删除一个文件。 创建fifo文件 命令&#xff1a; 文件类型p&…
阅读更多...
Android-WebRTC-双人视频

Android-WebRTC-双人视频

省略开启本机摄像头的过程 以下和WebSocket通信的时候&#xff0c;是通过Gson转对象为字符串的方式传输的数据 整个过程 layout_rtc.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:and…
阅读更多...
汽车ECU刷机笔记

汽车ECU刷机笔记

汽车ECU刷机笔记 ECU简介ECU刷机的意义点火提前角点火延迟角调整意义 常见刷ECU的方法:成本价格1.通过obd汽车诊断口读写数据2.bdm后台调试模式3.BENCH刷写4.BOOT需要拆开电脑板&#xff0c;焊接电路 ECU刷写程序读取数据OBD tools(汽车诊断器)蓝牙ODB诊断器&#xff1a; 读写设…
阅读更多...
＜j-editable-table 隐藏一列表格数据

＜j-editable-table 隐藏一列表格数据

&#xff1c;j-editable-table 隐藏一列表格数据 隐藏条码 本来列代码是这样的 {title: 条码, key: barCode, width: 15%, type: FormTypes.input, defaultValue: , placeholder: 请输入${title},validateRules: [{ required: true, message: ${title}不能为空 },// { pattern…
阅读更多...
二分搜索树的特性

二分搜索树的特性

一、顺序性 二分搜索树可以当做查找表的一种实现。 我们使用二分搜索树的目的是通过查找 key 马上得到 value。minimum、maximum、successor&#xff08;后继&#xff09;、predecessor&#xff08;前驱&#xff09;、floor&#xff08;地板&#xff09;、ceil&#xff08;天…
阅读更多...
leetcode 699. 掉落的方块(java)

leetcode 699. 掉落的方块(java)

掉落的方块 leetcode 699. 掉落的方块题目描述线段树解法代码演示 leetcode 699. 掉落的方块 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/falling-squares 题目描述 在二维平面上的 x 轴上&#xff0c;放置着一些方块…
阅读更多...
jmeter软件测试实验（附源码以及配置）

jmeter软件测试实验（附源码以及配置）

jmeter介绍 JMeter是一个开源的性能测试工具&#xff0c;由Apache软件基金会开发和维护。它主要用于对Web应用程序、Web服务、数据库和其他类型的服务进行性能测试。JMeter最初是为测试Web应用程序而设计的&#xff0c;但现在已经扩展到支持更广泛的应用场景。 JMeter 可对服务…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023