张家明做网站做网站模板平台
目录
1.优化-提取css代码
1.1. 插件 mini-css-extract-plugin
1.2. 步骤：
1.3. 注意
1.4. 好处
1.5. 练习
2. 优化-css代码提取后压缩
2.1. 问题引入
2.2. 解决
2.3. 步骤
3. Webpack打包less代码
3.1. 加载器 less-loader
3.2. 步骤
3.3. 注意：
4. Webpack打包图片
4.1. 资源模块
4.2. 步骤
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. 练习
//引入模块
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字符串）