04.webpack中css的压缩和抽离

1.抽离css文件

利用mini-css-extract-plugin插件,替代style-loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = smart(webpackCommonConf, {mode: 'production',output: {// filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},module: {rules: [// 抽离 css{test: /\.css$/,loader: [MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader'css-loader','postcss-loader']},// 抽离 less --> css{test: /\.less$/,loader: [MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader'css-loader','less-loader','postcss-loader']}]},plugins: [// 抽离 css 文件new MiniCssExtractPlugin({filename: 'css/main.[contenthash:8].css'})],})

2. 优化压缩css代码

terser-webpack-pluginoptimize-css-assets-webpack-plugin

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = smart(webpackCommonConf, {mode: 'production',output: {// filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},module: {rules: []},plugins: [],optimization: {// 压缩 cssminimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],}
})

3.完整压缩抽离css代码

const path = require('path')
const webpack = require('webpack')
const { smart } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { srcPath, distPath } = require('./paths')module.exports = smart(webpackCommonConf, {mode: 'production',output: {// filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},module: {rules: [// 图片 - 考虑 base64 编码的情况{test: /\.(png|jpg|jpeg|gif)$/,use: {loader: 'url-loader',options: {// 小于 5kb 的图片用 base64 格式产出// 否则,依然延用 file-loader 的形式,产出 url 格式limit: 5 * 1024,// 打包到 img 目录下outputPath: '/img1/',// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)// publicPath: 'http://cdn.abc.com'}}},// 抽离 css{test: /\.css$/,loader: [MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader'css-loader','postcss-loader']},// 抽离 less --> css{test: /\.less$/,loader: [MiniCssExtractPlugin.loader,  // 注意,这里不再用 style-loader'css-loader','less-loader','postcss-loader']}]},plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')}),// 抽离 css 文件new MiniCssExtractPlugin({filename: 'css/main.[contenthash:8].css'})],optimization: {// 压缩 cssminimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle Data Redaction和Oracle Data Pump

本实验的使用环境基于之前的博客:一个简单的Oracle Redaction实验 本实验参考文档为15.14 Oracle Data Redaction and Oracle Data Pump 先创建directory并赋权: -- connect to database or pluggable database alter session set containerorclpdb1;…

mysql 中with的用法(3)

有表(tb),数据如下: 请用SQL,生成如下的样式: 一、建表 CREATE TABLE tb (id varchar(3) DEFAULT NULL,pid varchar(3) DEFAULT NULL,name varchar(64) DEFAULT NULL ) INSERT INTO tb (id, pid, name) VALUES(002, 0, 浙江省)…

docker更换国内源

docker更换国内源 1、编辑Docker配置文件 在终端中执行以下命令,编辑Docker配置文件: vi /etc/docker/daemon.json2、添加更新源 在打开的配置文件中,添加以下内容: {"registry-mirrors": ["https://hub-mirror…

Chrome中设置安全来源域名

目的: 使得本地映射的域名能被浏览器安全访问,允许调用设备资源 步骤: 在Chrome中导航栏打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure 填入hosts域名:如 http://h5-twzc003.local.com 参考: h…

赴日开发工程师是做什么的?

日本的软件开发岗位对技术要求和沟通能力都有较高的要求,赴日开发工程师主要负责软件设计、开发和测试,包括编写代码、测试代码和修复漏洞等工作。开发人员必须对软件架构、设计模式和业务逻辑有深入的理解,并能做出合适的技术决策。 当然&a…

时间序列与 Statsmodels:预测所需的基本概念(1)

后文:时间序列与 statsmodels:预测所需的基本概念(2)-CSDN博客 一、说明 本博客解释了理解时间序列的基本概念:趋势、季节性、白噪声、平稳性,并使用自回归、差分和移动平均参数进行预测示例。这是理解任何…

江湖再见,机器视觉兄弟们,我已经提离职了,聪明的机器视觉工程师,离职不亏本!

我闻江湖已叹息,又闻人间繁闹闹。同为布衣沦落人,相逢何必曾相识。 此生谁料事事休,道不尽人情冷暖,聚散离合总平常,不似勇气少年时。 我估计今年公司年底是发不出工资了,因为订单续不上。年终奖更是没有&…

鸢尾花分类

第1关:什么是决策树 1.AB 2.B 第2关:信息熵与信息增益 import numpy as npdef calcInfoGain(feature, label, index):计算信息增益:param feature:测试用例中字典里的feature,类型为ndarray:param label:测试用例中字典里的label&#xf…

Android 弹出自定义对话框

Android在任意Activity界面弹出一个自定义的对话框,效果如下图所示: 准备一张小图片,右上角的小X图标64*64,close_icon.png,随便找个小图片代替; 第一步:样式添加,注意:默认在value…

Go 内存分配:结构体中的优化技巧

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等,您的关注将是我的更新动力! 在使用Golang进行内存分配时,我们需要遵循一系列规则。在深入了解这些规则之前,我们需要先了解变量的对齐…

通过微软MediaCreationTool制作Win10系统安装U盘,安装纯净版Win10的通用教程

最近新入手了一台Lenovo的入门级主机。 为了避免以后忘记装机步骤,特写下此博客记录。 装机步骤是在Lenovo网站上看的,在这表示感谢。 https://iknow.lenovo.com.cn/detail/177365

Ubuntu下发送邮件

mail命令在Ubuntu下是需要安装的,使用下条命令进行安装: sudo apt-get install heirloom-mailx 接下来输入用户密码,等待安装完成 此时还不能发送外部服务器邮件,需要完成以下配置,修改/etc/nail.rc或者/etc/s-nail.…

(十二)Flask重点之session

session 自我介绍&基本使用: 在Flask中,Session是一种用于在客户端和服务器之间存储和传输数据的机制。它允许您在用户与应用程序之间保持状态,并且可以存储和检索有关特定用户的信息。 Flask使用Werkzeug库提供的SecureCookie来实现S…

LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索Indexes for information retrieve

接着前面的Langchain,继续实现读取YouTube的视频脚本来问答Indexes for information retrieve LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗…

Python接口自动化(什么是接口、接口优势、类型)

简介 经常听别人说接口测试,接口测试自动化,但是你对接口,有多少了解和认识,知道什么是接口吗?它是用来做什么的,测试时候要注意什么?坦白的说,笔者之前也不是很清楚。接下来先看一下…

Python懒羊羊

目录 系列文章 写在前面 绘图基础 懒羊羊 写在后面 系列文章 序号文章目录直达链接表白系列1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595…

requests库出现AttributeError问题的修复与替代方法

在使用App Engine时,开发者们通常会面临需要发送爬虫ip请求的情况,而Python中的requests库是一个常用的工具,用于处理爬虫ip请求。然而,在某些情况下,开发者可能会遇到一个名为AttributeError的问题,特别是…

力扣贪心——跳跃游戏I和II

1 跳跃游戏 利用边界进行判断,核心就是判定边界,边界内所有步数一定是最小的,然后在这个边界里找能到达的最远地方。 1.1 跳跃游戏I class Solution {public boolean canJump(int[] nums) {int len nums.length;int maxDistance 0;int te…

Day36力扣打卡

打卡记录 T 秒后青蛙的位置(DFS) 链接 class Solution:def frogPosition(self, n: int, edges: List[List[int]], t: int, target: int) -> float:g [[] for _ in range(n 1)]for x, y in edges:g[x].append(y)g[y].append(x)g[1].append(0)ans …

力扣labuladong——一刷day44

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣298. 二叉树最长连续序列二、力扣988. 从叶结点开始的最小字符串三、力扣1022. 从根到叶的二进制数之和四、力扣1457. 二叉树中的伪回文路径五、力扣 前…