当前位置： 首页 > news >正文

了解Webpack并处理样式文件

news 来源：原创 2024/9/30 23:13:24

目录

  • 引入
  • 定义
  • 安装和使用
  • 配置文件
    • 命令配置
    • 单独文件
    • 指定文件
  • 处理样式
    • css-loader
      • 使用
    • style-loader
    • less-loader
    • PostCSS
      • postcss-loader
      • postcss-preset-env

引入

随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

  • 比如开发过程中我们需要通过模块化的方式来开发

  • 比如通过ES6+、TypeScript开发脚本逻辑，通过sass、 less等方式来编写css样式代码

  • 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中没有面临这些问题

  • 是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular

  • 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的

  • Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化的

  • 但 Webpack 作为前端资源构建工具+静态模块打包器，是面试中的重中之重，我们有学习的必要

定义

webpack的官方文档是 https://webpack.js.org/ ， webpack的中文官方文档是https://webpack.docschina.org/ ， DOCUMENTATION：文档详情是有助于理解的

在这里插入图片描述

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序

  • 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

  • 静态的static：最终可以将代码打包成最终的静态资源（部署到静态服务器）

  • 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等

  • 现代的modern：正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

在这里插入图片描述

安装和使用

Webpack的运行是依赖Node环境的，所以电脑上必须有Node环境，再安装webpack

  • 先安装Node.js，同时会安装npm，Node官方网站：https://nodejs.org/

  • webpack的安装目前分为两个：webpack、webpack-cli：

    • npm install webpack webpack-cli –g： 全局安装

    • npm install webpack webpack-cli –D： 局部安装

    • webpack和webpack-cli什么关系呐？
      在这里插入图片描述

      1. 执行webpack命令，会执行node_modules下的.bin目录下的webpack

      2. webpack在执行时是依赖webpack-cli的，如果没有安装就会报错

      3. 因为Webpack-cli是Webpack的命令行接口，它提供了许多有用的命令来帮助开发者管理Webpack项目

      4. Webpack-cli可以理解成Webpack的’管家’，它负责接收并解析命令行参数

      5. webpack-cli解析完命令行时，它调用相应的Webpack插件或功能来执行任务，才是真正利用webpack进行编译和打包的过程

      6. 所以在安装webpack时，需要同时安装webpack-cli

      7. 第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西

  • 前面安装完就可以在项目使用webpack了：

    1. 使用 npm init创建package.json文件，用于管理项目的信息、库依赖等

    2. 使用 npm install webpack webpack-cli -D安装局部的webpack

    3. 若全局也安装了webpack要使用npx webpack命令打包，全局没安装使用webpack命令

    4. 也可以在package.json中创建"scripts": {"build": "webpack"}脚本，使用 npm run build 执行脚本打包

  • 打包会发生什么？

    • 当运行webpack命令时，webpack会查找当前目录下的 src/index.js作为入口，如果没有此文件就报错

    • 从入口开始，会生成一个依赖关系图，包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）

    • 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）

    • 打包完会在目录下会生成一个dist文件夹，里面存放一个main.js的文件，就是打包之后的文件

    • main.js中的代码会被压缩和丑化，代码仍存在ES6语法，比如箭头函数、const等，webpack不会自动转化需要我们后面配置

配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的

命令配置

webpack打包命令改变配置：

  • 配置webpack打包入口文件（默认src/index.js）：webpack --entry ./src/main.js，会打包./src/main.js，只有这一次打包生效

  • 配置webpack打包出口文件（默认dist/main.js）：webpack --output-path ./build，会打包代码，生成bulid文件夹

  • 配置webpack打包后的文件名（默认dist）：webpack --output-filename bundle.js，打包代码并生成bundle.js文件

  • 三者可以随意混合使用：比如 webpack --entry ./src/main.js --output-filename bundle.js

  • 想要每次打包生效需要在package.json配置"scripts": {"build": "写想要的webpack命令"}，然后打包执行 npm run build 就可以了

单独文件

也可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

// package.json
{"name": "webpack-study","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"webpack": "^5.95.0","webpack-cli": "^5.1.4"}
}// webpack.config.js
module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: "/build", // 必须是绝对路径},
};

这时 npm run build 执行完发现，在项目目录下根本没有打包成功的文件夹，但我们在C盘看到了打包的文件，可想而知肯定是输出path配错了
在这里插入图片描述

那么我们就需要结合Node知识进行修改path了，修改后打包就能看到在当前根目录已经有了build文件夹，Node具体学习这篇文章：https://blog.csdn.net/qq_45730399/article/details/142339453?spm=1001.2014.3001.5501

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",/* __dirname: 绝对路径，获取当前⽂件所在的路径，不包括后⾯的⽂件名path.resolve(): 将参数解析为绝对路径下面两行代码都可以*/// path: path.resolve(__dirname, "./build"),path: path.resolve(__dirname, "build"),},
};

指定文件

如果配置文件并不是webpack.config.js的名字，这个时候可以通过 webpack --config 你的配置文件名字 来打包并指定对应的配置文件

  • 如果还是使用webpack命令打包不会报错，只是会使用默认的打包配置，配置文件无效

  • 每次执行命令对源码编译非常繁琐，可以在package.json中配置"scripts": {"build": "webpack --config wk.config.js"}

处理样式

// index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 引入我们打包后的js文件 --><script src="../build/bundle.js"></script></body>
</html>// index.js
import "./style.css";const divEl = document.createElement("div");
divEl.innerHTML = "hello world";
divEl.className = "box";
document.body.appendChild(divEl);// style.css
.box {color: coral;font-size: 20px;font-weight: bold;
}

我们写了上面代码执行打包命令，然后发现报错了，读错误说也许需要一个loader处理css文件，这就是下面要学习的loader了
在这里插入图片描述

css-loader

上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？

  • loader 可以用于对模块的源代码进行转换

  • 可以将css文件也看成是一个模块，我们是通过import来加载这个模块的

  • 加载这个模块时，webpack不知道如何对其进行加载，必须制定对应的loader来完成这个功能

  • 对于加载css文件来说，需要一个可以读取css文件的loader，最常用的是css-loader

  • npm install css-loader -D：安装css-loader

使用

使用这个loader来加载css文件呢？有三种方式：

  • 内联方式：import "css-loader!./style.css" 内联方式使用较少，因为不方便管理

  • CLI方式（webpack5中不再使用）：在webpack5的文档中已经没有了--module-bind，实际应用中也比较少使用

  • 配置方式：在webpack.config.js文件中写明配置信息

配置信息解释如下：

  • module.rules中允许配置多个loader（因为会使用其他的loader，完成其他文件的加载）

  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览

  • module.rules的配置如下：

    • rules属性对应的值是一个数组：[Rule]
    • Rule是一个对象，对象中可以设置多个属性：

      1. test属性： 用于对 resource（资源）进行匹配的，会设置成正则表达式

      2. use属性： 对应的值是一个数组：[UseEntry]，UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

        loader：必须有一个 loader属性，对应的值是一个字符串

        options：可选的属性，值是一个字符串或者对象，值会被传入到loader中

      3. loader属性： 字符串，单个规则只能有一个 loader 属性，如果需要使用多个 loader，loader 属性只能指定一个 loader，应该使用 use 数组

    // wk.config.js
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,// use: ["css-loader"], // 写法一// use: [ // 写法二//   {//     loader: "css-loader",//     options: {},//   },// ],loader: "css-loader", // 写法三},],},
};

配置并打包完之后在打包文件中能看到css代码，但发现页面样式无效，因为还需要借另一个loader将style插入页面

style-loader

  • css-loader只负责将.css文件进行解析，不会将解析之后的css插入到页面中

  • 如果希望完成插入style的操作，需要另外一个loader，就是 style-loader

  • npm install style-loader -D：安装style-loader

  • 在配置文件中添加style-loader，loader的执行顺序是倒着的，需要将style-loader写到css-loader的前面

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"], // 写法一// use: [ // 写法二//   {//     loader: "style-loader",//     options: {},//   },//   {//     loader: "css-loader",//     options: {},//   },// ],},],},
};

less-loader

在开发中，可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高，想让环境支持这些预处理器，需要把less、sass等编写的css需要通过工具转换成普通的css

  • npm install less -D：下载less

  • 编写style.less代码

    // style.less
@fontSize: 20px;
@fontWeight: bold;.box {color: red;font-size: @fontSize;font-weight: @fontWeight;
}

  • 在index.js文件中引入import "./style.less"

  • 尝试打包会报下图错误
    在这里插入图片描述

  • npm install less-loader -D：下载less-loader

  • 配置wk.config.js，less-loader 应该放在最后，因为需要让less-loader先把less转成css，在用css-loader解析css

    const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.less$/,use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "less-loader",},],},],},
};

PostCSS

PostCSS是一个通过JavaScript来转换样式的工具，可以帮助进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，postcss需要有对应的插件才会起效果，只要包括：

  • 自动前缀：使用插件如 autoprefixer 自动添加浏览器前缀。

  • CSS 变量：允许使用 CSS 变量和自定义属性。

  • 未来的 CSS 语法：通过 postcss-preset-env 等插件使用未来 CSS 特性。

  • 模块化：与 CSS Modules 等结合使用，实现更好的模块化支持。

postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的

  • npm install postcss-loader -D：安装postcss-loader

  • npm install autoprefixer -D：需要添加前缀，就安装autoprefixer

  • 这时就可以增加配置了，样式user-select就会被加上前缀来适配浏览器 -webkit-user-select: none; -moz-user-select: none; user-select: none

// style.less 
@fontSize: 20px;
@fontWeight: bold;.box-less {height: 60px;color: red;font-size: @fontSize;font-weight: @fontWeight;user-select: none;background-color: #f0a4a466;
}// wk.config.js
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader","css-loader","less-loader",{loader: "postcss-loader",options: {postcssOptions: {// plugins: ["autoprefixer"], // 也可以直接传入字符串plugins: [require("autoprefixer")], },},},],},],},
};
  • 单独的postcss配置文件：在根目录下创建postcss.config.js，wk.config.js中还是要写postcss-loader的，只是它插件的配置放单独文件
// wk.config.js
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader","css-loader","less-loader",{loader: "postcss-loader",// options: {//   postcssOptions: {//     plugins: [require("autoprefixer")],//   },// },},],},],},
};// postcss.config.js
module.exports = {plugins: [require("autoprefixer")],
};

postcss-preset-env

事实上，在配置postcss-loader时，配置插件并通常不使用autoprefixer，而使用另外一个插件：postcss-preset-env，因为它更强大

  • postcss-preset-env也是一个postcss的插件，会自动帮助我们添加autoprefixer（已经内置了autoprefixer）

  • 也可以将一些现代的CSS特性，转成大多数浏览器认识的CSS，会根据目标浏览器或者运行时环境添加所需的 polyfills（Polyfills 是一些代码（通常是 JavaScript）用来实现不被某些浏览器原生支持的特性）

  • npm install postcss-preset-env -D：安装postcss-preset-env

  • 直接把之前的autoprefixer改为postcss-preset-env，查看打包后打码可以发现它不仅加了前缀，还把less文件中的背景颜色转成浏览器能识别的 background-color: rgba(240, 164, 164, 0.4)

// wk.config.js
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader","css-loader","less-loader",{loader: "postcss-loader",// options: {//   postcssOptions: {//     plugins: [require("postcss-preset-env")],//   },// },},],},],},
};// postcss.config.js
module.exports = {plugins: [require("postcss-preset-env")],
};

相关文章：

  • 解决端口被占用
  • Chainlit集成LlamaIndex实现知识库高级检索（组合对象检索）
  • 解决 Could not locate zlibwapi.dll. Please make sure it is in your library path
  • Qt获取本机Mac地址、Ip地址
  • iOS OC 底层原理之 category、load、initialize
  • 通过 LabVIEW 正则表达式读取数值（整数或小数）
  • 软件设计之SSM(3)
  • 从《GTA5》的反外挂斗争看网络安全的重要性
  • 高中教辅汇总【35GB】
  • Java：Object操作
  • 【课程总结】day29：大模型之深入了解Retrievers解析器
  • 【C/C++】 秋招常考面试题最全总结（让你有一种相见恨晚的感觉）
  • spring如何解决循环依赖
  • 嵌入式linux裸机调试之windows、linux联合gdb
  • Gromacs——使用过程中暴露问题分析及学习
  • Git的一些常用操作
  • JavaScript服务器推送技术之 WebSocket
  • Kibana配置logstash，报表一体化
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • NSTimer学习笔记
  • React系列之 Redux 架构模式
  • vue 配置sass、scss全局变量
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 诡异！React stopPropagation失灵
  • 精彩代码 vue.js
  • 买一台 iPhone X，还是创建一家未来的独角兽？
  • 入门到放弃node系列之Hello Word篇
  • 鱼骨图 - 如何绘制？
  • 栈实现走出迷宫（C++）
  • 《码出高效》学习笔记与书中错误记录
  • kubernetes资源对象--ingress
  • 扩展资源服务器解决oauth2 性能瓶颈
  • ​如何使用QGIS制作三维建筑
  • ![CDATA[ ]] 是什么东东
  • #微信小程序（布局、渲染层基础知识）
  • $jQuery 重写Alert样式方法
  • （2）关于RabbitMq 的 Topic Exchange 主题交换机
  • (2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)
  • （C语言版）链表（三）——实现双向链表创建、删除、插入、释放内存等简单操作...
  • （笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第1关Linux 基础知识
  • （力扣）循环队列的实现与详解（C语言）
  • （深度全面解析）ChatGPT的重大更新给创业者带来了哪些红利机会
  • (十六)、把镜像推送到私有化 Docker 仓库
  • (译) 函数式 JS #1：简介
  • (原)本想说脏话,奈何已放下
  • （转）JAVA中的堆栈
  • (转)setTimeout 和 setInterval 的区别
  • (转)关于多人操作数据的处理策略
  • .axf 转化 .bin文件 的方法
  • .NET 4.0网络开发入门之旅-- 我在“网” 中央（下）
  • .net Signalr 使用笔记
  • .net6 webapi log4net完整配置使用流程
  • .NetCore项目nginx发布
  • .NET使用存储过程实现对数据库的增删改查
  • ；号自动换行