安装代码压缩插件npm install uglifyjs-webpack-plugin --save-dev在webpack.base.conf.js中配置/* * @Descri
原创
2023-05-19 15:26:04
1176阅读
图片压缩和合并 在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后
原创
2021-11-16 13:44:00
1082阅读
webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css ...
转载
2021-09-24 00:33:00
1505阅读
2评论
首先，先不直接上正题的内容，我们先来看一个情况，修改 webpack 的配置文件为生产模式 production： 然后进行打包，查看打包之后的 JS 代码发现是进行压缩处理过的，这个原理在之前的文章当中已经讲解过了，参考：
原创
2021-11-14 00:39:00
250阅读
压缩css 需要npm下载 css-minimizer-webpack-plugin const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssE ...
转载
2021-10-22 07:32:00
106阅读
2评论
说明玩转webpack课程学习笔记。JS 文件的压缩内置了 uglifyjs-webpack-plugin，
原创
2022-08-18 03:00:11
310阅读
安装这个插件的时候安装的是最新版本的v7.1.1版本，后面发现脚手架配置gzip打包还不支持这个版本的，所以就在此记录一下，查阅其他人的文章发现脚手架目前最新只支持到了v6.1.1版本，在降低版本后发现使用正常 npm install compression-webpack-plugin@6.1.1
原创
2021-07-23 16:03:36
537阅读
要求：基于 Node 库的 imagemin 或者 tinypng API。下面运行打包命令，可bpack 学习笔记。
原创
2022-08-28 00:00:32
867阅读
Terser介绍和安装 命令行使用Terser Compress和Mangle的options Terser在webpack中配置 CSS的压缩 index.js import {sum, mul} from "./math"; import _ from "lodash"; console.log
转载
2021-03-16 21:10:00
311阅读
2评论
webpack概念：现代javaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包城一个或多个bundle。 1.入口：入口起点指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。单 ...
转载
2021-09-09 00:15:00
378阅读
2评论
压缩css 需要npm下载 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin ...
转载
2021-10-21 20:37:00
41阅读
2评论
在现代前端工程化体系中，Webpack作为最主流的模块打包工具之一，承担着资源打包、依赖分析、代码转换与优化等核心职责。其通过将项目中的JavaScript、CSS、图片等静态资源视为模块，利用依赖图（Dependency Graph）的方式进行统一构建和输出。尤其在生产环境中，Webpack不仅需要完成基本的打包任务，还需对生成的JavaScript文件进行深度压缩以提升加载性能。Webpack 的工作流程基于五个核心配置项：entry（入口）、output（出口）、
1、使用的插件 MiniCssExtractPlugin：https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx 注意：在webapck4中使用的是MiniCssExtrac
转载
2018-12-17 14:22:00
398阅读
2评论
1.下载安装cnpm i image-webpack-loader -D2.配置 module:{ //配置一个rules(规则),rul
转载
2022-07-22 09:52:19
178阅读
一、打包CSS代码由于Webpack默认只识别js代码，所以打包css代码需要其他一些东西来帮忙加载器css-loader：解析css代码加载器style-loader：把解析后的css代码插入到DOM步骤：1.准备css文件代码引入到src/login/index.js中（压缩转译处理等）2.下载css-loader和style-loader本地软件包3.配置webpack.config.js让
原创
精选
2024-01-05 14:54:37
709阅读
对 JPEG/PNG 等格式：通过降低比特率、优化编码算法、去除元数据（如拍摄时间、相机型号）等方式减小体积。：对 TrueType 或 WOFF 字体，可去除无用的字符
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. T
转载
2016-08-17 02:49:00
229阅读
2评论
Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing
转载
2017-05-05 18:37:00
236阅读
2评论
1. 初识webpack 安装 Webpack 在安装 Webpack 前，你本地环境需要支持 node.js。 使用 npm 安装 webpack： npm install webpack webpack-cli -g //全局安装 npm install webpack webpack-cli ...
转载
2021-10-20 19:50:00
201阅读
2评论
什么叫webpack：webpack 是一个模块打包工具,起初它只能打包js文件，发展到现在可以打包任何
原创
2019-12-02 22:02:41
238阅读
