第八章 webpack5优化处理CSS

最新推荐文章于 2024-05-01 01:33:14 发布
最新推荐文章于 2024-05-01 01:33:14 发布
阅读量327 收藏 1
点赞数
分类专栏： Webpack5 文章标签： css javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36362721/article/details/128203266
版权

我们之前处理css资源只是简单的配置了一些loader，让webpack将其打包进bundle里面，但是这样对于项目加载以及用户体验不是很友好。

1. 提取CSS成单独文件

CSS 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

  • 安装所需依赖包
npm i mini-css-extract-plugin -D
  • 在webpack中配置插件

文件名：webpack.prod.js

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
     // ...
    ],
  },
  plugins: [
	// ...
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  mode: "production",
};
  • 运行webpack打包
npm run build

观察dist目录变化情况，是否将css文件分离出来了。

2. CSS兼容处理

因为浏览器厂商众多，采用的浏览器内核各不相同，所以对CSS语法支持的程度也各不相同。

有的可能是语法不支持，有的可能是语法支持但是效果表现形态不同，反正都是因为 浏览器不同所造成的。

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

  • 安装所需依赖包
npm i postcss-loader postcss postcss-preset-env -D
  • 在webpack中进行配置

文件名：webpack.prod.js

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
        // ...
    ],
  },
    
  mode: "production",
};

3. 控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

文件名：package.json

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

  • last 2 version: 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本

  • > 1%: 全球超过1%人使用的浏览器

  • not dead: 没有官方支持或更新超过24个月的浏览器。现在这些包括IE 11, IE Mobile 11，黑莓10，黑莓7，三星4,Opera Mobile 12.1和所有版本的百度（有道翻译的官方文档）。

4. 合并配置

由于我们每个处理样式的loader都使用到了postcss，我们这里简化一下代码

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
        // ...
   ]
  },
    // ...
}
  • 打包观察输出变化
npm run build

5. CSS压缩

  • 安装所需插件
npm i css-minimizer-webpack-plugin -D

这个插件使用 cssnano 优化和压缩 CSS。

  • 在webpack中进行配置

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// ...
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
     // ...
    ],
  },
  plugins: [
    // ...
    // css压缩
    new CssMinimizerPlugin(),
  ],

  mode: "production",
};

6.完整的生产模式配置

文件名：webapck.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};
  • 运行打包命令观察效果
npm run build
天界程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
7.webpack对css文件优化
qq_74217055的博客
03-14 359
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好2.配置webpack.config.js。
css-minimizer-webpack-plugin:Webpack的cssnano插件
04-28
css-minimizer-webpack-plugin 该插件使用来优化和缩小CSS。 就像但是使用查询字符串对源映射和资产更准确时，它可以缓存并在并行模式下工作。 入门 首先，您需要安装css-minimizer-webpack-plugin ： $ npm install css-minimizer-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。 例如： webpack.config.js const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) ; const CssMinimizerPlugin = require ( 'css-minimizer-webpack-plugin' ) ; module . exports = { module
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源
最新发布
2401_84418883的博客
05-01 1013
想要webpack打包资源，需要在主文件中引入css文件在webpack.config.js中，因为使用了style-loader，也需要安装const path=require(“path”) //nodejs核心模块//入口entry:“./src/main.js”, //相对路径//输出output:{//文件的输出路径//__dirname nodejs的变量，代表当前文件的文件夹目录。
webpack5配置CSS
red_password的博客
11-02 459
webpack配置css
Webpack打包css后z-index被重新计算的解决方法，webpackz-index
fengyjch
01-18 2052
发现问题最近在使用 Webpack 打包 css 文件时，发现了一个问题，发现打包后的 z-index 值跟源文件 z-index 不一致。如下图，左侧是源文件，右侧是打包后的文件：即使加上 !important，经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 处理之后也是 z-index: 2。因此，很可能是 cssnano 进行了重新计算（
webpack系列之优化策略
qq_124917348的博客
05-19 705
1、打包速度优化 1.1、速度监控插件—speedMeasureWebpackPlugin speed-measure-webpack-plugin是一款能检测Loader和Plugin耗时的插件，具体的用法就不再阐述了，可以去https://www.npmjs.com/package/speed-measure-webpack-plugin这看看 1.2、减小webpack搜索文件范围 1.2.1、Loader中的配置 我们通常使用Loader去加载webpack不能识别的文件，例如.css .vue文件
详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
08-30
Webpack会自动处理这些CSS文件，生成独立的CSS文件。 3. **生成多个入口文件**： 在大型项目中，通常需要根据不同的页面或功能生成多个独立的JavaScript文件。Webpack 的`entry`配置项可以接受一个对象，每个键...
webpack学习笔记之优化缓存、合并、懒加载
08-29
Webpack 是一个流行的模块打包工具，它能够将 JavaScript、CSS、图片等资源文件转换并整合到一起，便于在浏览器中高效地加载和运行。本篇学习笔记重点探讨了 Webpack 的优化策略，包括缓存管理、文件合并以及懒加载...
四大维度解锁Webpack3.0前端工程化
03-21
第8章 Webpack 和 React 介绍Webpack 和 React 的结合，介绍官方脚手架 Create-React-App 以及各种配置。 第9章 Webpack 和 Angular 介绍 Webpack 和 Angular的结合，介绍官方命令行工具 Angular-cli，以及如何...
0044webpack技术分享1
08-04
构建工具可以将 ES6 语法转换成浏览器可以识别的语法，压缩和混淆代码，并且可以处理 CSS 前缀补全和预处理器等问题。 3. webpack 的发展简史 webpack 的发展简史可以追溯到 2012 年，webpack 的作者 Tobias ...
Vue 打包体积优化方案小结
10-15
5. **提取CSS到单独文件**：使用`mini-css-extract-plugin`将CSS提取到单独的文件，加快初始渲染速度。 6. **压缩代码（Minification）**：通过`UglifyJS`或`Terser`压缩JavaScript代码，`cssnano`压缩CSS，减小...
postcss插件 -- cssnano V4版本配置
lwq的博客
09-13 6276
随着cssnano 的版本升级，之前的版本的配置已经对当前版本不兼容, 所以在升级cssnano版本时需要注意一些问题 由于v4版本会默认加载高级配置，而高级配置中有一些选项又可以我们不需要，所以我们需要去掉 继续使用高级配置 "cssnano": { "cssnano-preset-advanced": { zindex: false, au...
postcss压缩 postcss-clean替换cssnano
zgrbsbf的专栏
10-11 2428
使用cssnano 的过程中，发现他压缩的时候会把 "\5FAE\8F6F\96C5\9ED1" 编译成： \\5FAE\8F6F\96C5\9ED1 导致浏览器解析失败，后来换成了postcss-clean来压缩
webpack -- 完整入门学习笔记（六）
aina0674的博客
05-14 175
一、css压缩 这一节主要讲压缩代码，正常我们打包生产环境代码，js文件已经是压缩的，但是css并没有压缩，所以需要通过插件来压缩css代码，这个插件是optimize-css-assets-webpack-plugin和cssnano 安装 npm install optimize-css-assets-webpack-plugin cssnano --save-dev 调用 配置 ...
[css] 如何清除在项目中无用的css代码呢？
歌谣的博客
02-04 1785
[css] 如何清除在项目中无用的css代码呢？ 1、IDE中，会对没有使用到的样式，自己进行检测，删除时候，还需要手动删除。 2、webpack中，有基于消除无用css的插件（purifycss-webpack purify-css），不过需要提供html文件的模板，因为需要遍历这个模板，才知道用了哪些css。 3、单页面应用中，由于都是组件化的开发，无法提供一个最终版的html文件，所以不能适用上面2提供的方案。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大
webpack（5）webpack处理css文件
weixin_43880991的博客
07-11 217
css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; } 代码很简单，就是将body设置一个背景颜色，但是此时样式是不会生效的，因为我们根本没有引用...
Webpack 库CSS文件和自己的CSS文件加载顺序问题
qq_25516459的博客
12-17 1335
记录一下遇到的一个加载顺序问题 webpack加载CSS文件的顺序是按照JS代码导入的顺序来的。 当选择器具体性一致时（例如都只用CSS类选择），后加载的CSS规则会覆盖之前的规则。 所以如果自己的CSS文件后加载，而库CSS和自己的CSS都只使用类名选择，自己的CSS规则就会被覆盖… 导入CSS文件时要注意把库所用的放在导入代码的最前面。 ...
webpack, css兼容性处理
c_liufeng的博客
12-05 198
1.mini-css-extract-plugin 用于抽离css文件，实现css/js分离，并且自动添加引用到相应html代码中 // webpack.confing,js配置 new MiniCssExtractPlugin({ filename: 'css/index.css' }), 2.post-css postcss-preset-env post-css用于样式兼容各大浏览器 postcss-preset-env 用于帮助post-cs
Webpack 3.x 在CSS和Template中使用file-loader及解决image-webpack-loader 优化图片问题
热门推荐
Stan的专栏
11-27 1万+
如何在CSS或是template中使用图片？在CSS中使用，先安装file-loader：npm i -D file-loader安装完成后，在package.json中看到的当前版本："file-loader": "^1.1.5"接着在app.scss中加入下面的样式：html, body{ height: 100%; min-height: 100%; backgroun
webpack生产环境优化
09-14
对于优化 webpack 的生产环境，以下是一些建议： 1. 代码压缩：通过使用 UglifyJSPlugin、TerserWebpackPlugin 等压缩插件，将 JavaScript 代码进行压缩，减小文件体积，并且可以消除一些不必要的代码。 2. 代码...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

天界程序员

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

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

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

打赏作者

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

抵扣说明：

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

余额充值