目录
[1.1. 插件 mini-css-extract-plugin](#1.1. 插件 mini-css-extract-plugin)
[1.2. 步骤:](#1.2. 步骤:)
[1.3. 注意](#1.3. 注意)
[1.4. 好处](#1.4. 好处)
[1.5. 练习](#1.5. 练习)
[2. 优化-css代码提取后压缩](#2. 优化-css代码提取后压缩)
[2.1. 问题引入](#2.1. 问题引入)
[2.2. 解决](#2.2. 解决)
[2.3. 步骤](#2.3. 步骤)
[3. Webpack打包less代码](#3. Webpack打包less代码)
[3.1. 加载器 less-loader](#3.1. 加载器 less-loader)
[3.2. 步骤](#3.2. 步骤)
[3.3. 注意:](#3.3. 注意:)
[4. Webpack打包图片](#4. Webpack打包图片)
[4.1. 资源模块](#4.1. 资源模块)
[4.2. 步骤](#4.2. 步骤)
[3. 注意](#3. 注意)
1.优化-提取css代码
1.1. 插件 mini-css-extract-plugin
- 提取 css 代码
1.2. 步骤:
- 下载 mini-css-extract-plugin 本地软件包
npm i mini-css-extract-plugin --save-dev
- 配置 webpack.config.js 让 Webpack 拥有该插件功能
- 打包后观察效果
1.3. 注意
- 不能和 style-loader 一起使用
- 提取的css代码没有被压缩
1.4. 好处
- css 文件可以被浏览器缓存,减少 js 文件体积
1.5. 练习
javascript
//引入模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//入口
entry: path.resolve(__dirname,'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前,清空输出目录
},
//插件(给 Webpack 提供更多功能)
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'public/login.html'), //模板文件
filename: path.resolve(__dirname,'dist/login/index.html') //输出文件
}),
new MiniCssExtractPlugin() //生成 css文件
],
// 加载器(让 webpack 识别更多模块文件内容)
module: {
rules: [
{
test: /\.css$/i, //匹配以.css结尾的文件,并且忽视大小写
use: [MiniCssExtractPlugin.loader ,"css-loader"] //从后-前进行使用
},
],
},
};
2. 优化-css代码提取后压缩
2.1. 问题引入
- css 代码提取后没有压缩
2.2. 解决
- 使用 css-minimizer-webpack-plugin 插件
2.3. 步骤
- 下载 css-minimizer-webpack-plugin 本地软件包
npm i css-minimizer-webpack-plugin --save-dev
- 配置 webpack.config.js 让 webpack 拥有该功能
- 打包重新观察
3. Webpack打包less代码
3.1. 加载器 less-loader
- 把 less 代码编译为 css 代码
3.2. 步骤
- 新建 less 代码(设置背景图)并引入到 src/login/index.js 中
- 下载 less 和 less-loader 本地软件包
npm i less less-loader --save-dev
- 配置 webpack.config.js 让 Webpack 拥有功能
- 打包后观察效果
3.3. 注意:
- less-loader 需要配合 less 软件包使用
4. Webpack打包图片
4.1. 资源模块
- Webpack5 内置资源模块(字体,图片等)打包,无需额外 loader
4.2. 步骤
- 配置 webpack.config.js 让 Webpack 拥有打包图片功能
占位符 【hash】对模块内容做算法计算,得到映射的数字字母组合的字符串
占位符 【ext】使用当前模块原本的占位符,例如:.png / .jpg 等字符串
占位符 【query】保留引入文件时代码中查询参数(只有 URL 下生效)
- 打包后观察效果和区别
3. 注意
- 判断临界值默认为 8KB
大于 8KB 文件:发送一个单独的文件并导出 URL 地址
小于 8KB 文件:导出一个 data URI(base64字符串)