webpack-基本使用、核心概念、处理样式资源、图片优化

已于 2023-02-15 21:50:16 修改
阅读量362 收藏
点赞数 2
分类专栏： webpack 文章标签： webpack javascript 前端
于 2023-02-13 21:48:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45859670/article/details/129005175
版权

文章目录


在这里插入图片描述

🐰 w e b p a c k 简介 \color{red}{webpack简介} webpack简介

webpack基本使用

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去， 输出的文件就是编译好的文件，我们把该文件叫做bundle，可以自定义名称

功能介绍

  • 开发模式：仅能编译JS中的 ES Module语法
  • 生产模式：能编译JS中的ES Module语法，还能压缩JS代码

开发模式

开发模式就是我们开发代码时使用的模式

  • 编译代码，使浏览器能识别运行。开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认是不能处理这些资源的、我们需要加载配置来编译这些资源。
  • 代码质量检查，树立代码规范，检查代码规范和格式、统一风格、让代码更优雅美观

生产模式

🐰 核心概念

五大核心概念

  • entry（入口文件）
  • output （出口文件）官方文档
  • loader（加载器） 官方文档
  • plugins（插件）
  • mode（模式）

webpack的配置文件

基本配置 webpack.config.js

var path = require('path');
module.exports = {
    mode: 'development',
    // 入口文件
    entry: './main.js',
    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'foo.bundle.js'
    },
    // 加载器
    module: {
        rules: []
    },
    // 插件
    plugins: [],
    // 模式
    mode: 'development',
};

🐰 处理样式资源 − c s s 、 l e s s 、 s a s s 、 s t y l u s \color{red}{处理样式资源-css、less、sass、stylus} 处理样式资源−css、less、sass、stylus

处理css

安装css-loader，css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样

npm install --save-dev css-loader

webpack.config.js配置

// 加载器
    module: {
        rules: [
            {
                test: /\.css/i,
                //执行顺序，从右到左
                use: ["style-loader", "css-loader"]
            }
        ]
    },

css-loader => 将css资源编译成common.js的模块到js中
style-loader => 将js中css通过创建style标签添加到文件中生效

处理less

下载less-loader,webpack 将 Less 编译为 CSS 的 loader

npm install less less-loader --save-dev

webpack.config.js配置

{
	test: /\.less/i,
	use: ["style-loader", "css-loader", "less-loader"]
}

处理Sass

下载sass-loader ,加载 Sass/SCSS 文件并将他们编译为 CSS

npm install sass-loader -d

webpack.config.js

{
	test: /\.s[ac]ss$/i,
	use: ["style-loader", "css-loader", "sass-loader"]
}

起点文件 index.js,需要引入文件
import ‘./index.css’

html文件需要引入这个bundle.js文件就行了

<body>
<script src="../bundle/bundle.js">

</script>
</body>

处理stylus

下载stylus-loader,一个 webpack 的 Stylus loader。将 Stylus 文件编译为 CSS

npm i stylus-loader -d

webpack.config.js

{
	test: /\.styl$/,
	loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
	// 这种写法，只能加载一个loader
}

处理图片

webpack.config.js

{
	test: /\.(png|jpg|gif|webp)$/,
	type: "asset"
}

🐰 处理 J S − E s l i n t 、 B a b e l \color{red}{处理JS-Eslint、Babel} 处理JS−Eslint、Babel

Eslint(插件)

可组装的JavaScript和JSX工具

安装

npm install eslint-webpack-plugin eslint --save-dev

插件的话需要引入

const ESLintPlugin = require('eslint-webpack-plugin');

// 插件
plugins: [
    new ESLintPlugin({
        context: path.resolve(__dirname, "src") // 检查文件范围
    })
],

接下来就需要创建一个配置文件，来配置我们的eslint相关配置

  • .eslintrc.*:新建文件，位于项目根目录(只是格式不同)
    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
  • package.json中的eslintConfig：不需要创建文件，在原有的文件基础上写
    ESLint 会查找和自动读取他们，所以以上配置文件只需要存在一个即可

.eslintrc.js配置

module.exports = {
   // 解析选项
   parserOptions: {},
   //具体检查规则
   rules: {},
   // 继承检查规则
   extends: []
}
parseOptions

官方文档，更多的配置

parserOptions: {
    ecmaVersion: 6, // ES 语法版本
    sourceType: 'module', // ES 模块化
    ecmaFeatures: {  // ES其他特性
        jsx: true    // 开启JSX
    }
},
rules
  • off | 0 关闭规则
  • warn | 1 开启规则
  • error | 2 开启规则（会导致程序退出）

官方文档，更多的配置

rules: {
    semi: "error", //禁止使用分号
    'array-callback-return': 'warn',// 回调函数中要有return 语句
    'default-case': [
        'warn',       // 要求switch语句中有default分支，否则警告
        {
            commentPattern: '^no default$'  // 允许在最后注释 no default,就不会有警告了
        }
    ]
},
extends

Eslint 常见指令

.eslintignore

跟git的那个功能类似，都是忽略一些不必要检查的文件

babel

位于项目根目录

  • 新建配置文件
    • ./babel.config.js
    • .babel.config.json
    • .babelrc
    • .babelrc.json
  • packjson中的babel也可以写

以上的文件存在一个即可
安装
此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件

npm install -D babel-loader @babel/core @babel/preset-env webpack

presets预设

  • @babel/preset-env 用来编译新版本的JavaScript
  • @babel/preset-react 用来编译React.jsx的预设
  • @babel/preset-typescript 编译TypeScript语法的预设

配置

webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      // 可以单独拿出来，放在.babelrc.js
      // use: {
       //     loader: 'babel-loader',
       //     options: {
       //         presets: ['@babel/preset-env']
       //     }
       // }
    }
  ]
}

.babelrc.js

module.exports = {
    // 预设
    presets:["@babel/preset-env"]
}

🐰output 相关配置

修改输出文件位置

有目录格式的文件输出
我们可以看 output 这一模块

// 输出
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
},
// 加载器
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            generator: {
                filename: 'static/images/[hash][ext][query]'
            }
        }
    ]
}

清空上次输出文件夹位置

增加一个clean为true的配置项就可以了

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
},

开发服务devServer

这里配置devServer相关配置，前端配置代理也是在这里

devServer: {
    host: 'localhost', // 启动服务器域名
    port: 3000,    // 端口
    open: true,    // 是否自动打开浏览器
},

🐰图片优化

图片转base64

小图片不转为base64格式，可以减少对图片的单独请求

{
	test: /\.(png|jpe?g|gif|webp)$/,
	type: "asset",
	parser: {
		dataUrlCondition: {
			// 小于100kb的转为base64
			maxSize: 100 * 1024
			}
		}
}

🐰 生产模式配置 \color{red}{生产模式配置} 生产模式配置

提取css成单独文件

前面咱们在处理css中，是打包进入了js文件之中
安装下载

npm install --save-dev mini-css-extract-plugin

webpack.config.js配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

结果会形成单独的css文件
在这里插入图片描述

css 兼容性处理

安装postcss-preset-env

npm install --save-dev postcss-loader postcss

在webpack.config.js中配置，要注意配置所在的位置顺序

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

我们也可以控制兼容的范围
在package.json中

"browserslist": [
	 "last 2 version",     // 最近两个版本之内
	 "> 1%",               // 覆盖市面上99%的浏览器
	 "not dead"            //
]

css压缩

安装css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev

webpack.config.js

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
  module: {
	  optimization: {
	    minimizer: [
	      new CssMinimizerPlugin(),
	    ],
	  },
};

html js压缩 （生产模式，自动压缩）

🐰参考资料

B站教学视频
官方文档

会持续更新，还未更新完

李和贵
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
浅谈 Webpack 如何处理图片(开发、打包、优化)
11-27
从 webpack book 的 Loading Assets 一章中延申出来。 改善前端项目体验中，很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。 静态资源中，又以图片最为典型。那么我们在开发中该如何处理图片呢？ webpack 是前端较为常用的手脚架工具，本文以它为例。 主要分为 开发 、 打包 、 优化 三个方面来介绍 示例地址: webpack demo 开发 webpack 可以用使用url-loader  将静态图片转化为 base64 编码的字符串，并内联在对应的脚本中。大幅度地较少了页面
Webpack优化 - 图片
lln0001的博客
11-11 1174
图片压缩 jpegtran 不同窗口大小，显示不同大小,选中不同大小的图片 html img[srcset] img元素srcset属性含义及作用 在学习如何做网站时，网站中会有图片，图片使用HTML img 图片标签，img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如： <imgsrc="small.jpg...
webpack命令行
weixin_33898876的博客
06-16 548
前面的话 　　webpack提供了命令行接口（CLI），以便对构建过程进行配置和交互。这对于制定早期原型、轮廓、编写 npm 脚本 或者一些个人自定义需求很有用。本文将详细介绍webpack的命令行接口   常用配置 【--help】 　　列出命令行所有可用的配置选项 webpack --help webpack -h 【--config】 　　指定其它的配置文件。配置文...
19-webpack 加载图片优化
ZWQ0325的博客
07-26 388
在 07-webpack加载图片 中，有2中方式可以加载图片资源 通过 JavaScript ，使用 file-loader 通过 CSS ，使用 style-loader 其中，使用 file-loader 通过 JavaScript 加载图片的方式还可以继续优化。通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次...
配置webpack优化图片文件
m0_62962469的博客
10-19 582
进行处理，Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。优点：减少请求次数；过去webpack4将图片资源通过。在五大模块同级下设置该配置项即可。
详解vue-cli脚手架中webpack配置方法
10-18
Webpack 的核心概念包括 Entry（入口）、Output（输出）、Loaders（加载器）和 Plugins（插件）。在 Vue CLI 中，这些配置主要分布在 `webpack.base.conf.js`、`webpack.dev.conf.js` 和 `webpack.prod.conf.js` ...
webpack保姆级教学.pdf
11-19
Webpack 是一个流行的前端模块打包...以上是 Webpack 教程中涉及的一些核心概念和操作步骤，对于初学者来说，理解并实践这些知识点是掌握 Webpack 的基础。在实际开发中，还需要根据项目需求进行针对性的配置和优化。
轻松入门React和Webpack.docx
11-26
而Webpack则是一个模块打包工具，它可以处理JavaScript、CSS、图片等各种静态资源，将它们打包成一个或多个优化过的静态文件，供浏览器加载。 React中的组件是核心概念。组件有自己的结构（通过JSX定义），逻辑（在...
Webpack前端工程化实践.pdf
10-14
Webpack的出现，将模块打包的概念引入前端，它能够将各种类型的资源（JavaScript、CSS、图片等）视为模块，并通过loader和plugin进行处理和转换。Webpack的核心思想是"一切都是模块"，它将复杂的项目拆分为小模块，...
前端技术栈-怀化-杨-360001
08-08
本文将深入探讨前端技术的核心概念，包括Vue和React框架的原理、工程化实践、后端处理、网络通信、服务器部署以及浏览器工作原理等方面。 首先，让我们关注前端的主要框架——Vue和React。Vue.js是一个轻量级但功能...
前端工程化学习之webpack的优化
qq_32021429的博客
11-12 281
webpack的各种优化 1.删除无用的css purgecss-webpack-plugin：删除无用的css插件 glob：功能是查找匹配的文件 先下载这两个包，再去webpack.config.js文件中进行配置 2.图片压缩 image-webpack-loader 安装这个加载器的时候会遇到各种坑，如果丢包就用cnpm多下载几次 安装成功之后运行 npm run dev会报一个错Automatic publicPath is not supported in this browser 解决办法
webpack压缩大图片之项目资源优化
qq_34507902的博客
11-16 466
webpack打包时，会根据webpack.config.js中url-loader中设置的limit大小来对图片进行处理，小于limit的图片转化成base64格式，其余的不做操作。对于比较大的图片我们可以用image-webpack-loader来压缩图片。 在webpack.config.js中配置：image-webpack-loader 可能npm 下载不下来 改成淘宝镜像 $ npm install -g cnpm --registry=https://registry....
webpack优化图片路径，不出现images文件夹
weixin_50680057的博客
11-06 239
在webpack.config.js中配置优化图片路径： {test:/.jpg|png|gifKaTeX parse error: Expected 'EOF', got '&' at position 30: …der?limit=22229&̲outputPath=imag…/,use:‘url-loader?limit=470&outputPath=images’},修改limit值后发现成功啦。原因是由于图片不可以大过limit值，否则图片就生成base64格式了。 .
webpack优化篇（四十九）：使用 webpack 进行图片压缩
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-22 3643
要求：基于 Node 库的 imagemin 或者 tinypng API。下面运行打包命令，可以看到效果还是很明显的，只有 1.0.9 M 了。下载下来，我们添加到项目里面使用它，它有 2.17 M。使用：配置 image-webpack-loader。网站下载一张图片，这个网站的图片没有版权问题。安装依赖：这里使用 5.0.0 版本的。玩转 webpack 学习笔记。
webpack 图片处理和优化
ivenqin的博客
05-16 728
本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。 而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。 如何在webpack中打包图片 在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别： f
Webpack入坑笔记(二) 小图片优化,引入CSS,使用ES6
CloudJay的博客
06-20 1121
今天我要进一步深入的了解webpack的各种功能,webpack有着无数插件可以为项目提供各种支持,其中一部分对项目文件进行预处理的插件叫做loader(预处理器),比较常用的有:css预编译,less或sass预编译 css-loader,style-loader,less-loader 把css预编译并通过style标签嵌入到页面小图片优化生成base64码 url-loader 减少请求数使...
webpack优化之image 优化
feral_coder的博客
08-30 375
前言：在一下应用中，可能静态图片就占了应用尺寸的一半，虽然图片的加载不会像js一样阻塞dom的渲染，但是它们的加载却占用了很大的带宽，增加了公司的成本。在webpack中，我们可以使用url-loader，svg-url-loader，image-webpack-loader来进行图片优化。 1、url-loader // webpack.config.js module.exports =...
浅谈webpack4.0 性能优化
weixin_33860722的博客
11-21 662
前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，所以实际应用中，我们可以把精力更多专注在业务层面上，而无需分心于项目构建上的优化。然而从学习者的角度，我们需要了解w...
性能优化——webpack3 新增的Scope Hoisting
假面猫的博客
02-17 833
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 “作用域提升”，是在 Webpack3 中新推出的功能。 对比： util.js export default 'Hello,Webpack' main.js import str from './util.js'; console.log(str); 打包后： [...
image-webpack-loader使用方法
最新发布
04-27
image-webpack-loader是一个webpack插件，用于优化和压缩图像文件。它可以处理各种类型的图像文件，包括jpg、png、gif和svg等。 使用image-webpack-loader需要先安装该插件和相关依赖： ``` npm install image-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李和贵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值