如何对Webpack进行优化

目录

1.优化-提取css代码

[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字符串)

相关推荐
gqkmiss24 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃30 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰34 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye41 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm43 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
_半夏曲1 小时前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js