在webpack中，mode改成"production"后默认只能压缩html和js，因此我们需要引入插件optimize-css-assets-webpack-plugin主动压缩css。

一、处理图片文件

默认webpack无法处理css文件中的url地址 在打包时会报错无论是图片还是字体库 只要是url地址 都无法处理

解决方法：

在项目根目录下输入cnpm i url-loader file-loader -D安装url-loader和file-loader(url-loader内部依赖于file-loader)

导读

微前端已经成为前端领域如今比较火爆的话题，关于微前端价值的讨论，可以参考克军的《拥抱云时代的前端开发框架——微前端》。微前端在技术方面，有一个始终绕不过去话题就是前端沙箱。本篇具体探讨一下，在微前端领域如何实现前端沙箱。

1. 在中大项目编写 CSS 的普遍问题

• 高耦合——改样式的时候，会同时影响其他地方的样式，导致意外的样式问题
• 低复用——重复编写相同的样式，即枯燥乏味又导致 CSS 体积过大，从而影响开发体验与页面加载体验

一、前言

对于现代化的Web开发项目来说，CSS提供了一个大胆的想法和尝试。纵观前端发展历程，CSS 主要有如下几种组织方案：

1、CSS与JS 完全解耦，运用预处理器或编码规范（如OOCSS、SMACSS、BEM、ITCSS、Atomic CSS）来保持其可维护性。

【前端】style-loader与MiniCssExtractPlugin.loader：深度解析与实战应用

**前言**

在现代Web前端开发中，CSS模块化和自动化处理已成为提升开发效率、保证代码质量的重要手段。**style-loader**与**MiniCssExtractPlugin.loader**作为webpack中的两大CSS加载器，各自承担着不同的角色，助力开发者实现CSS的按需加载与优化。本文将深入剖析这两款加载器的工作原理、应用场景及配置方法，并通过实战代码演示如何在项目中灵活运用它们。阅读本文，您将收获：

在前端开发中，除了熟练使用框架，我们还要使用一样技术就是webpack，webpack相信很多小伙伴都多少有些了解，但是很多人可能对webpack不是特别熟练，只是知道基本的loader配置，甚至自己配置了loader都不知道这个loader的作用。我也曾经遇到过这样的问题，但是各种百度和google都没能找到特别全的loader介绍，所以我花一些时间整理了所有的loader终于解决了自己的痛点，今天我也把它分享给大家希望能够帮助一些前端开发的小伙伴。

loaders.css是Github上一个使用纯粹的css实现的开源loading动画库, 完全用CSS编写的加载动画的集合。

每个动画仅限于CSS属性的一小部分, 以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图, 可供参考!