Html和CSS的压缩打包"/>
【前端】Webpack5中Html和CSS的压缩打包
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样式兼容各个浏览器
更多推荐
【前端】Webpack5中Html和CSS的压缩打包
发布评论