WebPack5.0 快速入门

前端工程化WebPack5️⃣

前置知识: 此文章属于前端------框架进阶篇,需要实现掌握:HTML+CSS+JS三件套Node...

😀推荐分享一波个人Blog文档: JavaScript前端工程\模块化邂逅Node.JS的那一夜

什么是WebPack❓

Webpack是一个强大的静态模块打包工具🧰

主要用于现代JavaScript应用程序,它从一个或多个入口点开始,构建一个依赖图,

然后将项目中所需的每个模块打包成一个或多个bundle,这些bundle是静态资源,用于展示你的内容;

静态模块: 指的是编写代码过程中,htmlcssjs图片、文件🖺 等固定内容的资源;

打包: 把静态模块内容,压缩,整合,转译等... 🧊前端工程化;

  • WebPack支持多种模块标准语法
  • less/sass 转成 css 代码
  • ES6+降级成 ES5

什么是WebPack❓

Webpack是一个强大的静态模块打包工具🧰

主要用于现代JavaScript应用程序,它从一个或多个入口点开始,构建一个依赖图,

然后将项目中所需的每个模块打包成一个或多个bundle,这些bundle是静态资源,用于展示你的内容;

静态模块: 指的是编写代码过程中,htmlcssjs图片、文件🖺 等固定内容的资源;

打包: 把静态模块内容,压缩,整合,转译等... 🧊前端工程化;

  • WebPack支持多种模块标准语法
  • less/sass 转成 css 代码
  • ES6+降级成 ES5

为什么要使用WebPack❓

Webpack的需求主要是为了解决在传统Web开发中遇到的一些问题:

  • 多文件问题: 在没有模块打包工具的时代,一个项目通常有很多JavaScript文件🗃️;

    你需要在HTML中通过多个<script>标签引入它们,这会导致大量的HTTP请求,增加页面加载时间⏲️

    Webpack允许你将这些文件打包成:一个或几个bundle,减少了请求的数量,提高了加载效率📈

  • 新技术兼容支持: 现代JavaScript应用程序越来越倾向于使用:ES6+TypeScript🖽框架特有的语法

    这些新技术并不是所有浏览器都原生支持的: Webpack可以将这些现代代码转换为浏览器能够理解的格式;

  • 资源管理: Webpack还可以处理其他类型的资源,如图片、字体和样式表,它提供了loader和插件系统

    让你可以灵活地处理这些资源,并将它们包含在打包结果中;

  • 模块依赖: Webpack自动处理应用程序的依赖关系图;

    传统的构建工具要求你手动声明所有依赖,而Webpack会基于你的代码中的引用和导出来推断这些依赖;

  • 性能优化: Webpack关注性能加载时间,提供代码分割、懒加载等功能,优化最终的bundle大小,提升应用性能;

Webpack是前端开发中非常重要的工具,特别是在处理大型复杂的JavaScript应用程序时

帮助开发者组织和优化他们的代码和资源,使得应用程序加载更快,运行更高效;

WebPack初体验:

准备工作:

Webpack是一个现代JavaScript应用程序的静态模块打包工具: 也就是说,它本质是对一个已存在项目Project

进行工程化+打包的工具,本质属于一个NPM工具 ,并对完整项目进行依赖管理;所以我们需要一个小Demo:

  • 新建项目文件夹 Webpack_Project: npm init -y 初始化包环境,得到 package.json 文件;

  • 新建 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 引入并使用 /utils/checkJS文件暴漏函数

    js 复制代码
    /**体验 webpack 打包过程 
    *   indexJS中引入并使用 /utils/checkJS文件暴漏函数 */
    import { checkPhone, checkCode } from '../utils/check.js'
    console.log(checkPhone('13900002020'))
    console.log(checkCode('123123123123'))

WebPack打包管理:

下载 webpack webpack-cli 到项目中,为了方便管理,不同项目版本,所以独立安装webPack⬇️

sh 复制代码
npm i webpack webpack-cli --save-dev
#webpack是NPM全局软件包:是命令工具,为了保证项目之间版本分别独立,通常安装在项目dev模块中;
#下载到项目环境下,并把webpack命令配置到 package.json的scripts自定义命令;
  • 解释: package.jsonscripts 属性,支持自定义命令方便开发者指向:"scripts": { "build": "webpack" },

项目中运行工具命令: WebPack自动产生 dist 文件夹: 压缩和优化后,最终运行的代码)

WebPack打包disc文件夹:

在使用Webpack进行打包时,通常会将打包后的文件输出到一个名为dist的文件夹中:

通过观察发现,上述的WebPack_Project项目被翻译为: main.JS

js 复制代码
(()=>{"use strict";console.log(!0),console.log(!1)})();
  • WebPack 通过一些配置生成,发现WebPack_Projetc 最终的结果就是返回输出:true,false
  • 于是在disc文件夹------main.JS中,直接将运行结果进行输出,大大节省了进一步函数运算、引用的消耗;

🆗,经过上述案例,大致了解到了WebPack基本使用,它就是对项目工程进行打包翻译使其更加简洁高效的进行部署运维

注意:Webpack 默认入口和出口分别为: src/index.jsdist/main.js 但WebPack支持通过配置进行管理出入口等功能;

修改WebPack打包出入口:

要修改Webpack的打包出入口: 需要编辑webpack.config.js文件;

这个文件是Webpack的配置文件,它告诉Webpack如何执行任务,设置入口文件、出口文件等配置;

根目录新建 webpack.config.js配置文件📄:设置入口和出口: 更多配置请关注 WebPack 中文文档🔗

js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');

//WebPack配置:
module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    clean: true,                                //打包之前清空输出目录webpack5.0版本新增;
    path: path.resolve(__dirname, 'dist'),      //resolve nodeJS中拼接路径的一个函数;
    filename: './login/index.js'                //__dirname 执行文件所在的绝对路径;
  }
}
  • entry 属性定义了Webpack打包的入口文件路径;
  • output 对象定义了打包后的输出路径path和文件名filename

WebPack 自动生成 html 文件

WebPack本身并没有直接处理HTML文件的能力: 它主要是一个JavaScript模块打包工具,

所以: 如果想要将项目中的HTML文件,内自动的引入打包后的JS,还需要手动的进行修改;

🆗,上述我们发现原生 登录页面.html 中直接引入index.JS

  • 因为:内部引用util包JS文件,部分浏览器支持ES6+语法,导致报错!!
  • 后通过WebPack将JS进行打包,登录页面重新引入dist/login/index.JS,如此操作完成JS导入

那么WabPack 打包工具可以直接一键打包HTML,并根据HTML中的<script>块,自动配置管理JS文件吗?

插件 html-webpack-plugin

HtmlWebpackPlugin | webpack 中文文档

html-webpack-plugin 是一个用于生成 HTML 文件的 Webpack 插件,

它简化了为 Webpack 打包的文件创建 HTML 文件的过程,特别适用于那些文件名中包含哈希值的情况

这个插件会自动将打包后的 JavaScript 文件引入到生成的 HTML 文件中,从而确保你的 HTML 文件始终引用最新的打包结果

NPM安装插件:

下载 html-webpack-plugin 本地软件包到项目中: npm i html-webpack-plugin --save-dev

配置 webpack.config.js

js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//WebPack配置:
module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    clean: true,
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'                
  },
  plugins: [    //插件:给Webpack提供更多功能;
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'public/login.html'),  // 模板文件
      filename: path.resolve(__dirname,'dist/login.html'),    // 输出文件
    })
  ]
}

Webpack-打包 css 代码

要使用Webpack打包CSS代码,你需要配置一些loader加载器:

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

需要的 2 个加载器来辅助 Webpack 才能打包 css 代码: 使用时候要注意加载器版本,和WebPack的版本一致;

加载器和插件的区别: Webpack中,插件plugins、加载器loaders 是两个非常重要的概念:

  • 加载器 的主要作用是转换文件在Webpack配置文件的module.rules中配置:

    它们可以将不同类型的文件如:CSS、图片、TypeScript等,转换为Webpack可以理解和处理的模块;

  • 插件 的作用更为广泛,它们可以扩展Webpack的功能,并在Webpack的整个构建过程中执行各种任务

    插件可以用于打包优化、资源管理、环境变量注入等,在Webpack配置文件的plugins数组中配置;

准备工作: 定义login 页面的 .css 样式;

加载器css-loader、style-loader

①:NPM 安装加载器: 使用时候要注意加载器版本,和WebPack的版本一致,NPM默认情况安装最新版本;

sh 复制代码
#下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev

②:因为:WebPack主要是针对,JS的操作,所以如果需要管理CSS,需要在对应.JS中引入CSS

③:最后配置: webpack.config.js

  • 注意:use:[] 中的顺序不能随意修改:

    WebPack是按use:[]顺序加载: css-loader -> style-loader 顺序错了会导致,编译错误;

js 复制代码
//... 省略部分配置;
module:{      //加载器: 
    rules: [    //规则列表: 
        {
            test: /\.css$/i,                        //匹配所有的 .css 文件
            use: ['style-loader', "css-loader"],    //使用从后到前的加载器来解析 css 代码和插入到 DOM
        }
    ],
}

优化-提取 css 代码

上述我们实现了,将CSS进行WebPack管理:

but,好像效果并不是很满意,CSS和JS代码深度耦合在一起,虽然部署不受影响,但还可以优化: 将CSS、JS文件拆分;

  • CSS 文件可以被浏览器缓存,减少 JS 文件体积,且浏览器并行下载JS、CSS文件,提高网页加载效率;

mini-css-extract-plugin 插件

mini-css-extract-plugin 是一个用于将CSS代码从JavaScript中分离出来,并生成单独CSS文件的Webpack插件;

它的主要作用是优化和管理CSS文件,使得CSS代码可以被浏览器缓存,从而提高页面加载速度和性能

安装插件: npm i --save-dev mini-css-extract-plugin 注意版本问题;

注意: mini-css-extract-plugin 不能和 style-loader 同时使用;

配置 webpack.config.js

  • ①:引入定义require('mini-css-extract-plugin') 模块;
  • ②:在Plugins:[ new MiniCssExtractPlugin(),] 中定义插件;
  • ③:在module:{ rules:[ {},{} ] } 中设置定义加载器、插件配置;
js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//WebPack配置:
module.exports = {
  plugins: [    //插件: 给Webpack提供更多功能;
	//... 省略部分代码
	new MiniCssExtractPlugin(),
  ],
  module:{      //加载器: 
    rules: [    //规则列表: 
      //... 省略部分代码    
      //优化-提取 css 代码
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],     
		//mini-css-extract-plugin不能和style-loader同时使用
      }
    ],
  }
}


关于HTML页面如何确认CSS文件:

因为HTML中固定了JS的文件引用,JS中有导入CSS的引用,

所以插件根据JS确认,CSS属于某个HTML页面进行渲染<link/> 引入;

优化压缩CSS:

🆗,上述成功的分离了CSS和JS,但CSS的文件并没有压缩,所以还可以优化: 当然也还需要添加插件

css-minimizer-webpack-plugin

css-minimizer-webpack-plugin: 是一个用于优化和压缩CSS代码的Webpack插件:

  • 优化和压缩CSS :使用cssnano来优化和压缩CSS代码,减少文件大小,提高加载速度
  • 支持source maps:能够生成和处理source maps,帮助调试压缩后的CSS代码
  • 并行处理:支持多进程并行处理,提升构建速度
  • 缓存:支持缓存机制,进一步提高构建效率

NPM下载插件:

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

配置 webpack.config.js

webpack.config.js文件中引入并配置css-minimizer-webpack-plugin

  • optimization 配置项:用于自定义和控制打包过程中的各种优化策略;
  • minimize: 启用或禁用代码压缩、指定压缩代码的插件;
js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//WebPack配置:
module.exports = {
  //... 省略部分代码
  optimization:{  //优化
    minimizer: [  //最小化配置
      `...`,
      new CssMinimizerPlugin(),       //使用CssMinimizerPlugin进行CSS压缩
      //在webpack@5中,你可以使用 `...` 扩展现有的 minimizer即terser-webpack-plugin)
      //将下一行取消注释保证js代码还能压缩)
    ]
  }
}

打包Less代码:

为了方便CSS编写,现在很多前端都使用Less了:什么是Less:

  • Less Leaner Style Sheets的缩写,是一种CSS预处理语言,它扩展了CSS的功能,使得样式表的编写更加灵活和强大
  • Less引入了变量、嵌套、混合(mixins)、函数等特性,简化了CSS的编写和维护,
  • 本人并非纯前端就不过多介绍了

那么如何使用WebPack管理Less文件呢? 需要配置一些loader和插件....

加载器 less-loader

less-loader 是一个Webpack加载器,用于将Less文件编译为CSS:

支持Less特性 :支持Less的变量、嵌套、混合、函数等特性,配置选项 :可以通过lessOptions配置Less编译的选项;

sh 复制代码
#NPM安装依赖:
npm i less less-loader --save-dev

#less-loader 需要配合 css-loader和style-loader一起使用:
npm i css-loader style-loader --save-dev

#因为实际开发很多场景,需要将文件进行分离mini-css-extract-plugin
npm i --save-dev mini-css-extract-plugin		#不能和style-loader一起使用;
npm i css-minimizer-webpack-plugin --save-dev	#进一步优化压缩翻译后的css文件;

编写Less、并引入JS:

login.less: 给登录页面添加背景图片的CSS样式;

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

在JS文件中引入less文件: import '../public/login.less'; WebPack也就是依赖这个找到对应CSS、Less;

配置 webpack.config.js

js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//WebPack配置:
module.exports = {
  //... 省略部分代码
  module:{        //加载器: 
    rules: [      //规则列表: 
      //优化-提取 css 代码
      {
        test: /\.css$/i,                                      //匹配所有的 .css 文件
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //打包Less代码
      {
        test: /\.less$/i,                                                 //匹配所有的 .less 文件
        use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],  //按顺序加载器转换匹配文件类型
      }
    ],
  },
}

Webpack-打包 图片

关于WebPack打包图片,上述案例,并没有配置:我们发现WebPack自动进行了管理:

因为:WebPack5 内置了资源模块的打包,无需下载额外 loader: 可以更简单地处理图片等资源文件;

配置 webpack.config.js

js 复制代码
//为方便管理引入Node 文件资源管理模块;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//WebPack配置:
module.exports = {
  //... 省略部分代码
  module:{        //加载器: 
    rules: [      //规则列表: 
      //优化-提取 css 代码
      {
        test: /\.css$/i,                                      //匹配所有的 .css 文件
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //打包Less代码
      {
        test: /\.less$/i,                                                 //匹配所有的 .less 文件
        use: [MiniCssExtractPlugin.loader, "css-loader","less-loader"],  //按顺序加载器转换匹配文件类型
      }
	  //打包图片
      {
        type: 'asset',                                                    //资源模块类型(固定)
        test: /\.(png|jpg|jpeg|gif)$/i,                                   //匹配全类型图片文件
        generator: {                                                      
          filename: 'assets/[hash][ext][query]'                           //输出文件名及路径
        }
      }
    ],
  },
}

资源模块类型:

资源模块类型Asset Module Type 是 webpack 5 引入的一种新特性

用于处理资源文件如图片字体等,而无需额外配置 loader,它通过添加四种新的模块类型,替代了传统的 loader

  • asset/resource:将资源打包成一个单独的文件并导出该文件的 URL,之前通过使用 file-loader 实现

  • asset/inline :将资源打包成 data URIbase64,之前通过使用 url-loader 实现

  • asset/source:导出资源的源代码,之前通过使用 raw-loader 实现

  • asset :可以根据资源大小自动选择将资源打包成:建议使用

    判断临界值默认为 8KB: >8转存图片地址<8将图片转换base64至JS中转储

    单独的文件、还是data URI: 之前通过使用 url-loader,并通过配置限制资源体积实现;

输出文件名及路径(占位符): filename: 'assets/[hash][ext][query]' 表示输出在:assets目录下

/[...][...][...],占位符: 表示扩展额外的图片处理操作,操作可选,不同参数含义不同;

  • [hash] 使用文件内容的哈希值生成唯一的文件名,防止缓存问题;

    :多个相同图片名称不同,哈希之后成为一个图片节省磁盘空间;

    :多个相同文件名,哈希之后避免重名冲突渲染问题;

  • [ext] 保留文件的原始扩展名,如: .png.jpg...

  • [query] 保留文件的查询参数,对于对象存储OSS服务器 可以通过参数进行图片的渲染;

WebPack4对于图片处理,还需安装插件、加载器,因为已经不经常使用就不介绍了/

相关推荐
阳光阴郁大boy14 小时前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全15 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
艾小码16 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
前端小哲17 小时前
MCP从入门到实战
node.js·ai编程
dasseinzumtode18 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
光影少年18 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
加载中36119 小时前
pnpm时代包版本不一致问题还是否存在
前端·面试·npm
OEC小胖胖19 小时前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
KiraZz11 天前
【20250909】Vite构建优化指南
vite·前端工程化
梅孔立1 天前
服务器不支持node.js16以上版本安装?用Docker轻松部署Node.js 20+环境运行Strapi项目
服务器·docker·node.js