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对于图片处理,还需安装插件、加载器,因为已经不经常使用就不介绍了/

相关推荐
理想不理想v7 小时前
webpack最基础的配置
前端·webpack·node.js
哑巴语天雨9 小时前
React+Vite项目框架
前端·react.js·前端框架
南城巷陌9 小时前
JWT认证机制在Node.js中的详细阐述
node.js·jwt认证机制·前端安全认证
码农老起9 小时前
掌握 React:组件化开发与性能优化的实战指南
react.js·前端框架
臣妾没空9 小时前
全栈里程碑二:前端基础建设
webpack
理想不理想v11 小时前
node.js的简单示例
node.js
yrldjsbk12 小时前
使用Node.js搭配express框架快速构建后端业务接口模块Demo
node.js·express
维李设论12 小时前
Node.js的Web服务在Nacos中的实践
前端·spring cloud·微服务·eureka·nacos·node.js·express
撸码到无法自拔13 小时前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript