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

【前端】Webpack5中Html和CSS的压缩打包

news 2026/5/19 20:35:49

1.Webpack5简介

1.1.Webpack简介

在这里插入图片描述

（1）webpack的发展历程

2012.3—webpack（问世）
2014.2—webpack1
2016.12—webpack2
2017.6—webpack3
2018.2—webpack4
2020.10—webpack5（要求node版本10.13+）

（2）什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
静态模块
- 模块化开发，避免重复代码、逻辑，提高开发效率
打包
- 将各个模块，按照一定的规则组装起来

在这里插入图片描述

将多个不同类型文件打包
编译代码，确保浏览器能解析
对代码进行压缩，减少文件体积，提高加载速度
对源代码进行格式化校验
有热更新功能，提高开发效率
不同环境，提供不同的打包策略

1.2.Webpack五个核心配置

（1）入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph)的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。

在这里插入图片描述

（2）输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

在这里插入图片描述

（3）加载器（Loader）

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

在这里插入图片描述

（4）插件（plugin）

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

在这里插入图片描述

（5）模式（mode）

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

在这里插入图片描述

1.3.webpack初体验

（1）初始化项目

cnpm init -y

（2）安装webpack

cnpm i webpack webpack-cli -D

（3）创建入口文件

在这里插入图片描述

console.log('hello webpack');

（4）打包，指定mode

webpack ./js/index.js -o ./dist --mode=development

在这里插入图片描述

2.HTML、CSS资源打包

2.1.理解webpack配置文件

（1）webpack配置文件的作用

简化命令行的选项
默认配置文件名称为webpack.config.js
操作webpack大部分都是在配置webpack.config.js文件

（2）配置详情

mode（模式）

// 打包模式配置
mode: 'development',

entry（入口）

// 入口文件配置
entry: './src/index.js',

output（出口）

const { resolve } = require('path');// 出口文件配置
output: {// 所有输出文件的目标路径，必须是绝对路径path: path.resolve(__dirname, 'dist'),// 出口文件名配置filename: "bundle.js",
},

module（模块-loader配置）

// 模块配置
module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）],
},

devServer（用于快速开发应用程序）

// 开发服务器
devServer: {},

plugin（插件）

// 插件配置
plugins: [],

创建webpack.config.js配置文件

const { resolve } = require("path");module.exports = {// 打包模式配置mode: "development",// 入口文件配置entry: "./js/index.js",// 出口文件配置output: {// 所有输出文件的目标路径，必须是绝对路径path:resolve(__dirname, "dist"),// 出口文件名配置filename: "main.js",},// 模块配置module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）],},// 开发服务器devServer: {},// 插件配置plugins: [],
};

执行命令

npm run build

在这里插入图片描述

2.2.自动生成HTML文件和指定模板

自动生成HTML文件（html-webpack-plugin）,该插件可以生成一个 HTML 文件，并在HTML中加载所有打包资源，便于服务器访问。

（1）安装

cnpm i html-webpack-plugin -D

（2）在webpack.config.js中引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

（3）webpack.config.js配置plugins

plugins: [new HtmlWebpackPlugin(),
],

执行 npm run build

在这里插入图片描述

指定生成HTML模板

（1）新建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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body></body>
</html>

注意title这块要用EJS语法，是JS的模板引擎。

（2）配置plugins

plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  //指定 html 模板filename:'index.html',				//指定 html 名称title:'hello webpack'					//指定 html title}),
],

执行 npm run build

在这里插入图片描述

2.3.打包多个HTML页面和压缩

（1）打包多个HTML页面

plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  filename:'one.html',				title:'第一个'					}),new HtmlWebpackPlugin({template:'./html/index.html',  filename:'two.html',				title:'第二个'					}),
],

在这里插入图片描述

（2）压缩html

  plugins: [new HtmlWebpackPlugin({template:'./html/index.html',  filename:'index.html',				title:'index',minify: {collapseWhitespace: true,  // 清除空格换行removeComments: true,			 // 清除注释}, 				})],

在这里插入图片描述

2.4.CSS文件打包原理

打包css文件需要两个loader：

css-loader
- 将css代码转化为js代码，合并到打包后的js文件中。
style-loader
- 将包含css内容的js代码，插入到html中style标签中。

（1）安装css-loader和style-loader

cnpm i css-loader style-loader -D

（2）将创建的css文件引入到js文件中

创建css文件

.d1{background-color: cadetblue;
}//html 中 加入一个div元素<div class="d1">我是李祥</div>

import './css/main.css'
console.log('hello webpack');

（3）webpack.config.js配置module

// 模块配置
module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）{// 匹配css文件test: /\.css$/i,// 指定加载器，加载顺序是从左到右或者是从下到上use: ['style-loader', 'css-loader'],},],
},

在这里插入图片描述

2.5.将CSS代码抽离成单独文件

CSS代码抽离成单独文件的作用：

从js文件中抽离出css代码，减少js文件体积
当js文件比较庞大时，可以避免阻碍页面的渲染
提高渲染速度

将CSS代码抽离成单独文件的插件mini-css-extract-plugin

（1）安装mini-css-extract-plugin

cnpm i mini-css-extract-plugin -D

（2）webpack.config.js引入

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

（3）loader配置（替换style-loader）

use:[MiniCssExtractPlugin.loader,'css-loader']

（4）实例化插件

new MiniCssExtractPlugin({filename:'./css/main.css'
})

在这里插入图片描述

2.6.打包CSS预编译语言

（1）安装css预编译语言插件

less

cnpm install less less-loader -D

sass

cnpm install node-sass sass-loader -D

stylus

cnpm install stylus stylus-loader -D

（2）同样js引入less文件，webpack配置文件中配置规则

 // 模块配置
module: {rules: [{test: /\.less$/i,use: ['style-loader', 'css-loader', 'less-loader'],},],
},

2.7.CSS样式添加兼容前缀

（1）安装插件

cnpm i postcss-loader autoprefixer -D

（2）配置

webpack.config.js

use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'   // 处理css兼容
]

postcss.config.js

module.exports = {plugins: [require('autoprefixer')], // 添加浏览器前缀
};

package.json

"browserslist":["last 2 version",   // 兼容浏览器的最近两个版本"> 1%"							// 全球占有率超过1%的浏览器
]

作用：让特殊的css样式兼容各个浏览器

1.Webpack5简介

1.1.Webpack简介

1.2.Webpack五个核心配置

1.3.webpack初体验

2.HTML、CSS资源打包

2.1.理解webpack配置文件

2.2.自动生成HTML文件和指定模板

2.3.打包多个HTML页面和压缩

2.4.CSS文件打包原理

2.5.将CSS代码抽离成单独文件

2.6.打包CSS预编译语言

2.7.CSS样式添加兼容前缀

相关文章：