Webpack学习笔记

news2024/9/23 19:26:35

Webpack学习笔记

      • 1.引言
      • 2.Webpack相关的基础性问题
      • 3.Webpack的使用
      • 4.Webpack与代码规范和兼容性
      • 5.优化Html入口文件的处理
      • 6.实现webpack热更新
      • 7.生产模式与开发模式分析
      • 8.优化css配置，避免闪频现象
      • 9.代码压缩

1.引言

    最近想来自己对于前端的学习还是有很多的不足，于是决定重新学习一下webpack，毕竟在疫情可视化代码上线的时候使用的是直接在生产环境部署开发环境的代码，代码根本没有压缩、混淆等处理，无论是安全还是性能都显得有待提高。于是在B站找来了尚硅谷的教程，学习笔记总结分享如下。

2.Webpack相关的基础性问题

（1）为什么要使用打包工具?
    开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法才能运行，所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。选择webpack是因为功能齐全，相对于其他打包工具热度更高。
（2）webpack的用途?
    在开发模式下，webpack仅能编译 JS 中的 ES Module 语法，在生产模式下能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。
（3）举个例子
    直接贴代码如下：

//src/count.js
export default function count(x,y){
    return x+y;
}
//src/sum.js
export default function sum(...args){
    return args.reduce((p,c)=>p+c,0)
}
//简单说说reduce:
//array.reduce(function(total,currentValue,currentIndex ?,arr ?),initValue ?);
//其中reduce第一个参数传入的是函数，用于累加，内部参数依次为（和，当前数组值，当前数组下标，数组），
//第二个参数是total的初始值，加了？都是可选参数。

//调用者,src/main.js
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2,3));;
console.log(sum(1,2,3,4,5));

直接使用一个html文件导入调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello webpack!</div>
    <script src="../src/main.js"></script>
</body>
</html>

报错如下（不能使用模块导入声明）：
在这里插入图片描述
下面webpack登场（首先npm init -y，方便查看安装的具体依赖）：

npm i webpack webpack-cli -D #安装依赖

npx webpack ./src/main.js --mode=development #利用npx执行

为什么是npx？——npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！npm不能够直接执行依赖包里面的可执行文件。如果直接npm会报错。然后将导入的文件由src/main.js改成dist/main.js，就够执行成功了。

3.Webpack的使用

    webpack 的五大角色：
（1）entry：Webpack 从打包的入口文件；
（2）output： Webpack 打包完的文件输出位置等；
（3）loader：webpack 本身只能处理 js、json 等资源，其他资源需要借助 针对性的loader解析；
（4）plugins：扩展 Webpack 的插件，有一些模块webpack里面没有内置，需要使用插件的方式来引入；
（5）mode：打包的时候使用的模式（生产模式和开发模式）。
串联这些的是一个根目录下配置文件（webpack.config.js，当添加了webpack配置文件之后启动webpack打包的时候就只需要利用npx webpack即可），eg：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  //loader
  module: {
    rules: [],
  },
  plugins: [],
  mode: "development", // 开发模式
};

下面详细说说针对指定资源的打包方式：
（1）处理css文件：

npm i css-loader style-loader -D

如果需要对css文件进行压缩处理，需要使用模块化语法导入css，也就是在src/main.js中使用import "./css/index.css";导入css，在根目录的webpack.config.js文件中的rules模块部分添加如下代码（利用正则语法来检测文件后缀名并启用loader处理）：

 {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
 },

（2）处理less文件：

npm i less-loader less -D #把less 也加进去

同样在webpack.config.js配置项的rules部分添加如下代码：

 {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },

（3）处理 Sass 和 Scss 资源：
这里简单说说Sass和Scss的关系，sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。两者的不在于，sass时代是有严格的缩进规范并且没有‘{}’和‘；’，继sass之后scss的编写规范基本和css一致，也就是scss更便于阅读。好，直接说怎么利用webpack来打包这两种资源：

npm i sass-loader sass -D

同样在webpack.config.js配置项的rules部分添加如下代码：

 {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

（4）处理 Styl 资源（和sass差不多，也可以省略{}，:，,等）：

npm i stylus-loader stylus -D

同样在webpack.config.js配置项的rules部分添加如下代码：

 {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },

（5）处理图片资源，同样在webpack.config.js配置项的rules部分添加如下代码：

{
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被转化成base64，其它的会被重命名仍采用引入的方式
            //使用maxSize可以减少文件资源的请求次数
          }
        }
      },

补充关于静态资源的处理方式（在静态资源的rules部分内部追加配置）：

generator: {
  // 将图片文件(不能够转化成base64的)输出到 static/images 目录中
  // 将图片文件命名 [hash:8][ext][query]
  // [hash:8]: hash值取8位
  // [ext]: 使用之前的文件扩展名
  // [query]: 添加之前的query参数
  filename: "static/images/[hash:8][ext][query]",
},

（6）配置自动清空webpack上一次的生成文件，在output里面追加一个clean:true即可；
（7）处理字体资源（剩余其他类型的资源也一样），

{
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

说明一下这里的type属性，type: “asset/resource” 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理type: “asset” 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式。

4.Webpack与代码规范和兼容性

    为了提高代码的规范性可以使用eslint，为了提高代码的兼容性，可以使用babel来处理js文件，针对于eslint需要安装如下依赖（分别是适用于webpack的插件和eslint依赖）：

npm i eslint-webpack-plugin eslint -D

下面给出简单的eslint配置（在根目录下创建.eslintrc.js文件），如需根据实际情况调整可以参考eslint官方说明：

module.exports = {
    extends: ["recommend"],//使用官方推荐的eslint配置
    // 解析选项
    parserOptions: {
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
            jsx: true // 如果是 React 项目，就需要开启 jsx 语法
        }
    },
    rules: {
        semi: "error", // 禁止使用分号,"off"=0,"warn"=1,"error"=2
        'no-var': 2,
        'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
        'default-case': [
          'warn', // 要求 switch 语句中有 default 分支，否则警告
          { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
        ],
        eqeqeq: [
          'warn', // 强制使用 === 和 !==，否则警告
          'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
        ],
    }
};

最后在webpack的配置文件中加上const ESLintWebpackPlugin = require("eslint-webpack-plugin");同时在的plugins部分添加如下代码激活插件：

new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),

当然有些时候可能需要主动忽略对于某些文件的检查，这个时候可以使用.eslintignore文件，使用方式和gitignore一样，eg：

# 忽略dist目录下所有文件
dist

    接下来说说兼容性处理babel的使用，创建babel的配置文件babel.config.js：
下载相关的依赖项（babel依旧是采用loader的形式处理）：

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

在babel的配置项中添加如下代码：

module.exports = {
  presets: ["@babel/preset-env"] //开启智能预设，能够使用最新版本的JavaScript语法
  	//@babel/preset-react：用来编译 React jsx 语法的预设
	//@babel/preset-typescript：用来编译 TypeScript 语法的预设
};

然后再回到webpack配置文件的rules部分添加如下内容：

  {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

可以看到的一个比较明显的特点就是箭头函数消失了，转变成了普通函数，在sum函数里面的...args参数被修改成遍历模式了。

5.优化Html入口文件的处理

    当部署vue-cli生成的生产环境的文件时，我们会发现一般都是一个js文件和一个入口html文件，其实webpack也可以借助HtmlWebpackPlugin 插件实现这一点：

npm i html-webpack-plugin -D

跟前面提到的eslint插件一致，先定义并引入，然后在plugins部分启用：

const HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),

注意一点，此时需要撤销对main.js入口文件的引入，避免重复引入两次，而且之后生产环境是直接使用dist目录下的文件，两次导入会导致第二次外部资源引入失败。

6.实现webpack热更新

    在前面的基础上，每次修改代码之后需要重新打包，比较麻烦，解决方法是利用webpack-dev-server依赖：

npm i webpack-dev-server -D

下载完依赖之后在webpack配置文件的plugins的同级目录下添加如下服务器配置：

 devServer: {
    host: "localhost", //域名
    port: "3000", //端口
    open: true, // 是否自动打开浏览器
  },

然后利用npx webpack serve开启热更新服务，这样就能够下一次保存的时候自动重新打包了。

7.生产模式与开发模式分析

    为了将生产环境与开发环境分开，需要进行如下的调整：
（1）生产环境：不需要devServer；
（2）开发环境：关闭自动删除dist目录下的文件clean:true配置；
为了方便调起两种模式，可以在package.json里面配置脚本：

"scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config .webpack.dev.js",
    "build": "npx webpack --config webpack.prod.js"
  }

8.优化css配置，避免闪频现象

    在webpack打包css的时候，首先是js来处理css，然后创建style节点插入到html中，一旦我们在入口文件中或者嵌套导入的样式文件过多，很可能出现某些标签一开始没有css布局，之后轮到它加载了才有布局，可能会因为css引入之后html的盒子大量调整出现所谓的闪屏现象，解决方法是利用mini-css-extract-plugin插件，将样式预先合并处理，再通过link标签导入到页面中：

npm i mini-css-extract-plugin -D

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

 new MiniCssExtractPlugin({
      filename: "static/css/main.css", // 输出目录以及文件名
    }),

然后还需要在每一个css样式文件，对应的处理rules的loader部分追加一个MiniCssExtractPlugin.loader。
另一方面和js配置一样，由于不同的浏览器或者统一浏览器的不同版本，存在着css兼容问题，可以使用官方提供的postcss-loadercss兼容处理loader来优化：

npm i postcss-loader postcss postcss-preset-env -D

然后在每一个样式相关的rules配置项部分的loader里面加上如下的loader配置：

 {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },

兼容程度的配置上，可以在package.json里面添加配置项：

{
  "browserslist": ["ie >= 8"]//兼容ie8以上
}

常用的是：

{
  "browserslist": ["last 2 version", "> 1%", "not dead"] 
  //最近的两个版本，全球超过1%人使用的浏览器，去除里面已经挂掉的版本
}

9.代码压缩

只要开启了生产模式，webpack会自动压缩html文件和js文件，对于css文件压缩，需要使用css-minimizer-webpack-plugin插件（配置方式与上述插件的配置方式一致）：

npm i css-minimizer-webpack-plugin -D

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

 new CssMinimizerPlugin(),

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

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

相关文章

毕业论文查重

毕业论文查重

每当毕业季论文编写都是一件大事&#xff0c;论文查重又是最让人头痛的事情&#xff0c;这里总结一些简单论文查重方法&#xff0c;希望对你有帮助。 首先通过一下系统查询重复比例&#xff0c;之后对照重复比例进行修改&#xff0c;如下图通过PaperPass论文检测进行查询生成的…
阅读更多...
Linux安装JDK

Linux安装JDK

创建develop目录 mkdir /usr/local/develop/ 我这边是直接将包拖进来了 创建jdk目录 mkdir /usr/local/develop/jdk/ 解压安装包 并且将安装文件放到 jdk目录里 tar -zxvf /usr/local/develop/jdk-8u191-linux-x64.tar.gz -C /usr/local/develop/jdk/ 或 tar -xvf /usr/l…
阅读更多...
【信息系统项目管理师】论文写作心得整理篇

【信息系统项目管理师】论文写作心得整理篇

【信息系统项目管理师】论文写作心得整理篇 【信息系统项目管理师】论文写作心得整理篇【信息系统项目管理师】论文写作心得整理篇一.摘要二.论文评分标准1.切合题意2.应用深度和水平3.实践性4.表达能力5.综合能力和分析能力扣分项目加分项目不及格项目格式要求摘要的组成三.论…
阅读更多...
Unity 工具 之 报错 Jenkins 执行/调用 Python 脚本，报错提示 ‘python‘ 不是内部或外部命令，也不是可运行的程序或批处理文件

Unity 工具 之 报错 Jenkins 执行/调用 Python 脚本，报错提示 ‘python‘ 不是内部或外部命令，也不是可运行的程序或批处理文件

Unity 工具 之 报错 Jenkins 执行/调用 Python 脚本&#xff0c;报错提示 python 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件 目录 Unity 工具 之 Jenkins 执行/调用 Python 脚本&#xff0c;报错提示 python 不是内部或外部命令&#xff0c;也不是可运行…
阅读更多...
MyBatis -- 动态 SQL

MyBatis -- 动态 SQL

MyBatis -- 动态 SQL动态 SQL 使用1. <if> 标签2. <trim> 标签3. <where> 标签4. <set> 标签5. <foreach> 标签动态 SQL 使用 动态 sql 是 Mybatis 的强大特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 可以参考官方文档&#xff…
阅读更多...
SNARK原理示例

SNARK原理示例

1. 引言 前序博客有&#xff1a; SNARK DesignRollup项目的SNARK景观 SNARK方案由 Polynomial IOP ➕多项式承诺方案 组成。 当前的Polynomial IOP主要分为三大类&#xff1a; 1&#xff09;基于interactive proofs&#xff08;IPs&#xff09;的Polynomial IOP&#xff1…
阅读更多...
【10】C语言_for循环 | 初识 | 入门 |

【10】C语言_for循环 | 初识 | 入门 |

目录 1、引出for循环 2、for循环语法 例题&#xff1a; 1、引出for循环 因为while的三个条件&#xff0c;如果代码写的多的时候&#xff0c;以下的三个条件离得远不好&#xff0c;所以引出三个条件在一起的for循环 int main() { int i 1; //初始化while(i < 10)…
阅读更多...
Java基本数据类型及其包装类

Java基本数据类型及其包装类

内置数据类型 Java语言提供了八种基本类型。六种数字类型&#xff08;四个整数型&#xff0c;两个浮点型&#xff09;&#xff0c;一种字符类型&#xff0c;还有一种布尔型。 byte&#xff1a; byte 数据类型是8位、有符号的&#xff0c;以二进制补码表示的整数&#xff1b;…
阅读更多...
Prometheus-Exporter详解

Prometheus-Exporter详解

一、Exporter是什么 广义上讲所有可以向Prometheus提供监控样本数据的程序都可以被称为一个Exporter。而Exporter的一个实例称为target&#xff0c;如下所示&#xff0c;Prometheus通过轮询的方式定期从这些target中获取样本数据: 二、Exporter的来源 从Exporter的来源上来…
阅读更多...
26. 删除有序数组中的重复项

26. 删除有序数组中的重复项

文章目录题目描述方法一 双指针-while方法二 双指针-for题目描述 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。 由于在某些语言中不能…
阅读更多...
数字图像处理---空间滤波基础

数字图像处理---空间滤波基础

空间滤波概念 滤波&#xff1a;通过修改或者抑制给定图像的特定频率分量&#xff0c;常见有低通滤波器与高通滤波器。空间滤波&#xff1a;将像素值使用该像素值及其邻域的值进行替换&#xff0c;替换方式有线性与非线性两种&#xff0c;即线性滤波器与非线性滤波器。 线性滤…
阅读更多...
VScode快速配置C/C++环境

VScode快速配置C/C++环境

文章目录我安装时仅参考了这两篇分享1.下载并安装VScode 商店C/C插件2.下载MinGW-W64 x86_64-win32-seh3.配置各种.json5.Hello_world.cpp测试我安装时仅参考了这两篇分享 伸手党进&#xff1a;具体步骤主要是这篇&#xff1a;Hudiscount-Vscode配置C/C环境 MinGW-W64 x86_64-…
阅读更多...
华为数通--NAT、ACL、IPSec

华为数通--NAT、ACL、IPSec

NAT\ACL\IPSEC VPNNAT1.1静态NAT转换1.2NAT服务器1.3动态NAT1.4easy IPACL高级ACLIPSEC VPN配置IPSec V-P-N&#xff1a;.1 加解密点.2 IPSEC的SPD&#xff08;ACL&#xff09;、提议&#xff08;protocol&#xff09;和IPSEC 策略NAT(网络地址转换&#xff09; 1.1静态NAT转换…
阅读更多...
设计模式 （一） 单例模式 Java

设计模式 （一） 单例模式 Java

目录 一、饿汉式单例模式 二、懒汉式单例模式 三、最完美的单例模式写法 单例模式一般分为饿汉式与懒汉式&#xff08;类似于懒加载&#xff09;。饿汉式会在类加载时即刻创建实例对象&#xff0c;线程安全&#xff1b;懒汉式由于是在调用时才创建&#xff0c;所以需要考虑线…
阅读更多...
vue3中的v-for

vue3中的v-for

一.列表渲染v-for 真实开发中&#xff0c;往往会从服务器中拿到一组数据&#xff0c;并且需要对其进行渲染&#xff0c;这个时候可以使用v-for完成。 1.v-for的基本使用 1&#xff09;基本格式&#xff1a;“item in 数组” 数组通常是来自data或者prop&#xff0c;也可以是…
阅读更多...
Swift(2)

Swift(2)

因为要在31号之前用swift写一个系统&#xff0c;我不得不把我的电脑系统更新了一下&#xff0c;之后便下载了这个&#xff0c; 做了一些简单的测试&#xff0c;部分软件还是可以打开的。 这个软件用着的确比那个网站用着要舒服很多。 目录 问号 感叹号 ​编辑if else ​编…
阅读更多...
Ubuntu18.04下linuxdeployqt下载安装

Ubuntu18.04下linuxdeployqt下载安装

开发环境&#xff1a;Ubuntu18.04QT5.14.2 使用需求&#xff1a;使用QT开发完成后的项目需要使用linuxdeployqt工具打包生成相关文件 下载安装&#xff1a; 1.使用火狐浏览器打开linuxdeployqt下载地址&#xff1a; https://github.com/probonopd/linuxdeployqt/releases h…
阅读更多...
Diffusion Models, CLIP与 DALLE 的学习与感悟

Diffusion Models, CLIP与 DALLE 的学习与感悟

整合了一下关于Diffusion Models, CLIP与 DALLE 的介绍&#xff0c;应用&#xff0c;以及后续的拓展路线。 (Generative) Diffusion Models 还是先横向对一下最近比较火的几个生成模型 GAN、VAE、Flow-based Models、Diffusion Models。 在这里&#xff0c;可以将Diffusion…
阅读更多...
SAP FICO 批量成本估算

SAP FICO 批量成本估算

批量成本估算 【前言】 单个物料的成本估算我们使用事务代码CK11N&#xff0c;标记/发布使用事务代码CK24&#xff0c;那么若有大批量新建的物料需要做成本估算&#xff0c;怎么办&#xff1f; 这里首先需要检查“成本核算变式”。 后台路径&#xff1a;SPRO→控制→产品成…
阅读更多...
SpringBoot+Vue项目图书个性化推荐系统

SpringBoot+Vue项目图书个性化推荐系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023