webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述

使用mini-css-extract-plugin插件来打包css文件(从css文件中提取css代码到单独的文件中,对css代码进行代码压缩等)。

本次采用三个配置文件:

  • 公共配置文件:webpack.common.js
  • dev开发环境配置文件:webpack.dev.js
  • prod生产环境配置文件:webpack.prod.js

2.webpack.common.js (公共配置文件)

  • 开发环境和生产环境共用的配置,借助webpack-merge插件,可以merge到开发或生产环境,从而减少重复配置。
  • 引入了Node环境变量process.env.NODE_ENV,可以根据传入的环境参数,动态更改配置,具体请看代码。
npm i -D mini-css-extract-plugin webpack-merge html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV != "production"
const path = require('path');module.exports = {entry: './src/index.js',devServer: {static: '/dist'},module: {rules: [{test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件use: [{loader: MiniCssExtractPlugin.loader,options: {// 指定一个 publicPath,默认使用 webpackOptions.output中的publicPath// publicPath的配置,和plugins中设置的filename和chunkFilename的名字有关// 如果打包后,background属性中的图片显示不出来,请检查publicPath的配置是否有误// publicPath: './src',publicPath: devMode ? './src' : './src',   // 根据不同环境指定不同的publicPath},},'css-loader',// 'sass-loader'],},]},plugins: [// 创建了一个全新的html文件,所有的 bundle 都自动添加到其中。new HtmlWebpackPlugin({title: 'development'}),// css代码分离new MiniCssExtractPlugin({// 这里的配置和webpackOptions.output中的配置相似// 即可以通过在名字前加路径,来决定打包后的文件存在的路径filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),// 每次构建前清理 /dist 文件夹clean: true,},optimization: {// 进行代码分离splitChunks: {chunks: 'all',},}
}

3.webpack.dev.js(dev环境的配置文件)

  • dev环境的配置,记得把mode设置为development模式,否则webpack4以后会默认为production模式。
npm i -D webpack-merge

注意引入merge是使用 { merge } 形式:

const { merge } = require("webpack-merge");
const common = require("./webpack.common");module.exports = merge(common, {// dev环境的配置,记得把mode设置为development模式,否则webpack会默认为production模式。mode: "development",// 可以将编译后的代码映射回原始源代码,便于追踪 error 和 warning(浏览器中打开生成的 index.html 文件,点击按钮后控制台将会报错)devtool: 'inline-source-map',
});

4.webpack.prod.js(生产环境的配置文件)

  • 生产环境的配置,默认开启tree-shaking和js代码压缩;
  • 通过optimize-css-assets-webpack-plugin插件可以对css进行压缩,与此同时,必须指定js压缩插件(例子中使用terser-webpack-plugin插件),否则webpack不再对js文件进行压缩;(webpack5中不再支持optimize-css-assets-webpack-plugin插件而是使用css-minimizer-webpack-plugin)
  • 设置optimization.splitChunks.cacheGroups,可以将css代码块提取到单独的文件中。
  • 注意生产环境必须使用devTool:'source-map',否则报警告页面渲染不出来
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
// 生成环境下对JS进行压缩
const TerserJSPlugin = require('terser-webpack-plugin');
// 生成环境下对CSS进行压缩
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");module.exports = merge(common, {// dev环境的配置,记得把mode设置为development模式,否则webpack会默认为production模式。mode: "production",devtool: 'source-map',optimization: {minimizer: [new TerserJSPlugin({}), new CssMinimizerWebpackPlugin({})],splitChunks: {cacheGroups: {styles: {name: 'styles',test: /\.css$/,chunks: 'all',enforce: true,},}},}
});

和dev环境同样的配置会报以下警告,页面也渲染不出来:

使用css-minimizer-webpack-plugin和terser-webpack-plugin插件也无法正常启动

解决:

是因为使用了devtool:"inline-source-map"选项配置后报警告,改为devtool:"source-map"后启动正常

5.package.json配置文件

  • sideEffects: 生产环境打包的时候,会默认开启tree-shaking,如果不设置sideEffects,某些通过import方式引入的css文件可能不会被打包,因为tree-shaking会甩掉没有导出任何东西(即文件中没有export关键字)的文件。所以,不希望被tree-shaking的文件,请在sideEffects中配置与之匹配的正则表达式(如下,在package.json中添加)。
  • NODE_ENV: 由于项目中用到了Node的环境变量,所以打包时需通过NODE_ENV传入环境变量。例如:"script":{ "dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development"})。
{"sideEffects": ["*.css","*.scss","*.sass"],"scripts": {"dev": "set NODE_ENV=development && webpack serve --open --config ./webpack.dev.js --mode=development","prod": "set NODE_ENV=production && webpack serve --open --config ./webpack.prod.js --mode=production"},
}

6.总结:

  • 不同环境下的打包,如果出现图片显示不了时(特别是css中的图片),请检查publicPath的配置。
  • mode: 'production'会开启tree-shaking和js代码压缩,但配置optimization. minimizer会使默认的压缩功能失效。所以,指定css压缩插件的同时,务必指定js的压缩插件。
  • mini-css-extract-plugin插件,结合optimization.splitChunks.cacheGroups配置,可以把css代码打包到单独的css文件,且可以设置存放路径(通过设置插件的filenamechunkFilename)。
  • 生产环境下不能使用devtool:"inline-source-map",而用devtool:"source-map"

参考:mini-css-extract-plugin插件快速入门_mn_front的博客-CSDN博客

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

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

相关文章

接口测试及常用接口测试工具

首先,什么是接口呢? 接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口。 系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把数据库共享给你,他只能给你…

maven 初学

1. maven 安装 配置安装 路径 maven 下载位置: D:\software\apache-maven-3.8.6 默认仓库位置: C:\Users\star-dream\.m2\repository 【已更改】 本地仓库设置为&#xff1a;D:\software\apache-maven-3.8.6\.m2\repository 镜像已更改为阿里云中央镜像仓库 <mirrors>…

算法通过村第十二关-字符串|黄金笔记|冲刺难题

文章目录 前言最长公共前缀纵向比较横向比较 字符串压缩问题表示数值的字符串总结 前言 提示&#xff1a;我有时候在想&#xff0c;我是真的不太需要其他人&#xff0c;还是因为跟他们在一起时没法自己&#xff0c;所以才保持距离。我们的交谈就像是平行而毫无交集的自言自语。…

Python—Scrapy实践项目

爬取豆瓣电影2022年Top250部经典电影 1.项目概述 从https://movie.douban/top250爬取电影的标题、评分、主题。我在之前使用普通的爬虫实现了类似的功能&#xff0c;可以对比来进行学习&#xff08;Python爬虫——爬虫基础模块和类库&#xff08;附实践项目&#xff09;&#…

矩阵的相似性度量的常用方法

矩阵的相似性度量的常用方法 1&#xff0c;欧氏距离 欧式距离是最易于理解的一种距离计算方法&#xff0c;源自欧式空间中两点间的距离公式。 (1)二维平面上的点 a ( x 1 , y 1 ) a(x_1,y_1) a(x1​,y1​)和点 b ( x 2 , y 2 ) b(x_2,y_2) b(x2​,y2​)的欧式距离为 d ( x …

【网络】抓包工具Wireshark下载安装和基本使用教程

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的帮助&#x1…

javaee ssm框架项目整合thymeleaf2.0 更多thymeleaf标签用法 项目结构图

创建ssmthymeleaf项目 创建ssmthymeleaf项目参考此文 thymeleaf更多常用标签 <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><title>Title</title> …

怎么压缩ppt文件?

怎么压缩ppt文件&#xff1f;造成ppt文件体积太大的原因主要有两个&#xff1a;① 图片和媒体文件&#xff0c;PPT中使用高分辨率、大尺寸的图片或视频文件会增加文件大小。如果未经压缩或优化&#xff0c;这些文件可能会占用较大的存储空间&#xff1b;② 动画和特效&#xff…

Super-jacoco应用统计代码覆盖率及问题处理

一、原文地址 滴滴开源Super-jacoco&#xff1a;java代码覆盖率收集平台 - 掘金 二、背景 我要使用Super-jacoco&#xff0c;对手工测试&#xff0c;进行代码覆盖率的统计。 为什么使用Super-jacoco&#xff0c;而不是直接使用jacoco&#xff0c;因为Super-jacoco解决了增量…

STC89C51基础及项目第13天:小车go、软件调速

1. 小车散件组装_推荐相同接线&#xff08;259.104&#xff09; 2. L9110s电机控制器接线&#xff08;260.105&#xff09; L9110s电机模块开发 接通VCC&#xff0c;GND 模块电源指示灯亮&#xff0c; 以下资料来源官方&#xff0c;但是不对&#xff0c;根据下节课实际调试 …

WPF向Avalonia迁移(一、一些通用迁移项目)

通用变更 WPF&#xff1a;Visibility 其他参考文档 WPF&#xff1a; <TextBlock Visibility"Visible"/><TextBlock Visibility"Collapsed"/><TextBlock Visibility"Hidden"/>Avalonia &#xff1a; <TextBlock IsVisib…

POI 和 EasyExcel 操作 Excel

一、概述 目前操作 Excel 比较流行的就是 Apache POI 和阿里巴巴的 easyExcel。 1.1 POI 简介 Apache POI 是用 Java 编写的免费开源的跨平台的 Java API&#xff0c;Apache POI 提供 API 给 Java 程序对 Microsoft Office 格式文档读和写的常用功能。POI 为 “Poor Obfuscati…

20231008工作心得:sql

1.SQL语句里的if的嵌套使用 if(product A and brand_name B,C,if(product A and brand_name !B,D,product)) as product if&#xff08;A,B,C&#xff09;。SQL里if函数&#xff0c;如果条件A成立&#xff0c;就显示B的值&#xff0c;否则就显示C。 这个代码的意思的&#x…

RabbitMQ 介绍与 SpringBootAMQP使用

一、MQ概述 异步通信的优点&#xff1a; 耦合度低吞吐量提升故障隔离流量削峰 异步通信的缺点&#xff1a; 依赖于Broker的可靠性、安全性、吞吐能力架构复杂&#xff0c;业务么有明显的流程线&#xff0c;不方便追踪管理 什么是的MQ MQ&#xff08;Message Queue&#xf…

ARM-day5作业

.text .global _start _start: 1、设置GPIOE、GPIOF寄存器的时钟使能 RCC_MP_AHB4ENSETR[4]->1 0x50000a28 LDR R0,0x50000a28 LDR R1,[R0] ORR R1,R1,#(0x3<<4) STR R1,[R0]2、设置PE10、PF10、PE8管脚为输出模式 GPIOE_MODER[21:20]->01 0x50006000…

Flask与PyQt结合使用时候,阻塞,界面卡死

一.问题起因 做了个服务端, 使用到了python的PYQT6和Flask, PYQT做的是个简单的设置界面: 但是在点击开始运行, 写入flask run的代码的时候, PYQT界面卡死了 代码如下: # 生产环境模式server make_server(0.0.0.0, ser_port, app)server.serve_forever()app.run() 二.问题产…

【Python】WebUI自动化—如何用Selenium IDE录制脚本生成单元测试代码(基于Chrome)(17)

一.Selenium IDE介绍 Selenium IDE是Chrome和FireFox浏览器中的插件&#xff0c;Selenium IDE结合浏览器提供脚本录制、脚本回放、脚本编辑、元素定位等功能&#xff0c;使用Selenium IDE可以将录制的脚本生成相应单元测试框架的自动化测试脚本&#xff0c;录制脚本支持导出Py…

Meta分析的流程及方法

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…

【数据结构】栈和队列-- OJ

目录 一 用队列实现栈 二 用栈实现队列 三 设计循环队列 四 有效的括号 一 用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; typedef int QDataType; typedef struct QueueNode {struct QueueNode* next;QDataType data; }QNode;typedef struct …

使用docker搭建nacos单机、集群 + mysql

单机搭建 1 拉取mysql镜像 docker pull mysql:5.7.40 2 启动mysql容器 docker run -d --namemysql-server -p 3306:3306 -v mysql-data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 mysql:5.7.40 3 执行nacos的数据库脚本 /* * Copyright 1999-2018 Alibaba Group Holding L…