webpack快速入门-处理css方面优化

最新推荐文章于 2024-05-14 10:05:47 发布
最新推荐文章于 2024-05-14 10:05:47 发布
阅读量345 收藏 1
点赞数 1
分类专栏： webpack快速入门 文章标签： webpack css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48960335/article/details/126680053
版权

单独文件

css文件不处理会被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式

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

我们应该要使用单独的css文件，通过link标签加载提高用户体验

安装依赖

npm i mini-css-extract-plugin -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

打包

npm run build

打包成功后可以看到dist目录下static/css多出一个单独的css文件main.css

兼容性处理

因为css3样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对css3属性进行统一的兼容性处理。

下载依赖

npm i postcss-loader postcss postcss-preset-env -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
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", // 将package文件中的css兼容性样式引入进来
            ],
          },
        },
      },
      preProcessor,
    ].filter(Boolean);
  };

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: getStyleLoaders(),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: getStyleLoaders("less-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

兼容配置

package.json

"browserslist": [
    "> 1%",
    "last 2 versions"
]

配置兼容性前后对比

配置前

在这里插入图片描述

配置后

在这里插入图片描述

css压缩

压缩css代码体积

下载依赖

npm i css-minimizer-webpack-plugin -D

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
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", // 将package文件中的css兼容性样式引入进来
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
};

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: getStyleLoaders(),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: getStyleLoaders("less-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"] // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html', // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'), // 模板文件的路径
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        // css压缩
        new CssMinimizerPlugin(),
    ],
    // 开发服务器 devServer 自动化（修改代码自动编译，自动刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为：webpack-dev-server
    devServer: {
        port: 8088, // 服务器启动端口号
        static: path.join(__dirname, 'dist'), // 服务器静态资源目录
        open: false, // 启动服务器后自动打开浏览器
        compress: true, // 开启gzip压缩
    }
}

打包

npm run build

可以看下打包后的css文件，配置css压缩前和配置css压缩后有很明显的变化

查看本系列文章合集click me

下载本系列文章源码click me

温情key
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 5024
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
前端工程化之Webpack优化
weixin_52884694的博客
09-13 2480
❝ 打不垮我的，将使我更加坚强 --尼采 ❞ 大家好，我是「柒八九」。 好久没更文了，其实这段时间，一直没闲着。在准备一些比较重要的东西。忙着跑步，忙着学习，忙着xx。 总之就是，一直在忙着，从未停歇。 虽然，这段时间，没有文章的发布，其实，在私底下，已经有不下10篇的文章已经起手了。等再润色一下，就会和大家见面。 学习总结 这是，我之前学习总结，后期会逐步给大家免费分享。敬请期待。 好了，闲话少叙。 今天，我们来谈谈关于-- Webpack的打包优化。 你能所学到的知识点 ❝ Webpack Loa
推荐使用：Optimize CSS Assets Webpack Plugin - 提升CSS优化的新利器
最新发布
gitblog_00088的博客
05-14 360
推荐使用：Optimize CSS Assets Webpack Plugin - 提升CSS优化的新利器 项目地址:https://gitcode.com/NMFR/optimize-css-assets-webpack-plugin 在Web开发中，优化前端资源是提升用户体验的重要一环，尤其是对于CSS的处理。今天，我们要向您推荐一款强大的Webpack插件——Optimize CSS Ass...
7.webpack对css文件优化
qq_74217055的博客
03-14 361
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好2.配置webpack.config.js。
如何对css进行优化处理
subsistent的博客
03-27 237
使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。注：内联css并不是不加以限制的，它的初始拥堵窗口3存在限制（TCP相关概念，通常是 14.6kb， 压缩后的大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。
webpack性能优化方案(详细)
weixin_57677300的博客
05-20 8470
因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；只需要提供SplitChunksPlugin相关的配置信息即可；Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；SplitChunks自定义配置解析常用配置解析默认值是async另一个值是initial，表示对通过的代码进行处理。
webpack学习--webpack经典7分钟入门教程
08-30
Webpack 的核心概念是模块化，它能够处理项目中的所有资源，将它们组织成按需加载的块，从而实现优化的加载性能。 为什么选择Webpack？在大型项目，尤其是单页应用中，Webpack 的优势在于： 1. **按需加载**：...
react-typescript-webpack2-cssModules-postCSS:用于React，TypeScript，postCSS，ITCSS，CSS模块，Webpack和实时重新加载的简单入门模板（React Hot Loader 3）
05-15
用于React，TypeScript，postCSS，ITCSS，CSS模块，Webpack 2和实时重新加载的简单入门模板（React Hot Loader 3） 使用此入门模板可以为您的SPA项目快速创建第一个脚手架。 如果您不想忘记，请在Github上★。 特征...
webpack-starter-kit:带有Webpack的入门资料库
05-24
带有Webpack的入门资料库该项目的主要思想是分离收集器配置文件的代码以方便使用和进一步扩展，以及按顺序配置文件的内容。 加载程序，插件，选项和构建器预设所需的模块位于webpack文件夹中。 插件文件。 该项目是...
css-minimizer-webpack-plugin:Webpack的cssnano插件
04-28
css-minimizer-webpack-plugin 该插件使用来优化和缩小CSS。 就像但是使用查询字符串对源映射和资产更准确时，它可以缓存并在并行模式下工作。入门首先，您需要安装css-minimizer-webpack-plugin ： $ npm install ...
react-webpack-tailwind-template:带有 webpack、babel 和 tailwindcss 的 React 模板，为您配置并针对生产进行了优化。 创作者轴心
05-31
React 项目 (JSX) 入门，使用 SASS/SCSS、Eslint、Prettier、TailwindcssV2 等，所有这些都使用 Webpack。 git clone项目并开始使用完全优化的 React 开发环境。 开始 用于开发 git clone将存储git clone到您的本地...
Webpack 中 css import 使用 alias 相对路径的方法
01-19
在用 Webpack 处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源。 在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名； ..., resolve: { ..., alias: { '@': resolve('src') } } 这样我们就可以在 js 文件中用形如 import tool from '@/utils/xxx' 的方式引用 /src/utils/xxx.js 文件，并且 Webpack 能正确识别并打包。 但是在 css 文件，如
优化（学习）公司的webpack配置(二)
XiaoYi
03-28 1153
优化（学习）公司的webpack配置(二) 文章目录优化（学习）公司的webpack配置(二)提高打包速度配置扩展名CSS 模块化读取静态资源错误成功启动了 上周开始优化（学习）公司的webpack配置(一) https://blog.csdn.net/XiaoYige_97/article/details/123737624 ，想看从零开始配置webpak会遇到什么坑，可以去上一篇博客了解。现在我们故事还没有完，那是一个美丽的周末。。。我打开了公司的项目，继续学习配置webpack,遇到了很多精彩的故
CSS 优化、提高性能的方法有哪些？
weixin_47450807的博客
04-15 3804
一、写在前面 CSS 优化、提高性能的方法有哪些？
【webpack】css引入
逆风飞翔的代码狗
07-28 446
webpack -css的引入 前面我们说到webpack-dev-server可以运行的时候将文件解析到内存中直接运行，但是我们没有提到css样式在webpack中的引用： 我们新建了index.scss，然后通过require对css样式进行引入使用，会发现报错，其实就是缺少了css样式的处理工具： 里面的appropriate loader就指明了缺少相应的装载器，此时我们需要去看官网里面所提供的的loader（webpack所有的文件都可以加载成js文件进行使用，） webpack loader（
Gulp解决引入node_modules下的js/css文件路径问题
weixin_45047039的博客
11-19 2216
Gulp解决引入node_modules下的js/css文件路径问题使用gulp-useref插件 使用gulp-useref插件 在我们将文件构建到dist目录下后，我们的html会有一些对node_modules下的文件的依赖，例如jquery.js和bootstrap.css，这些文件并没有拷贝到我们的dist目录，这样我们部署上线就会找不到这些文件。 这时候我们就可以借助到gulp-useref插件，这个插件会自动去处理html当中的构建注释，例如： <!-- build:css asset
关于webpack打包 js、css 压缩优化总结
Hakim
04-02 2397
项目开发接近尾声，优化是不可忽略的，下面来说说我对项目的优化之路： 开发环境：使用vue-cli安装项目 "vue": "^2.4.2", "vue-router": "^2.7.0", "webpack": "^3.5.5", "node": "8.12.0", 一 基础优化： 路由按需加载、图片的懒加载、cdn地址引用，不多说了，直接上图： 1、*部分路由按需加载； 2、...
前端工具-webpack打包优化CSS篇
往事不回头,余生不将就
11-01 7523
CSS打包优化 实现css按需加载,主要是通过MinCssExtractPlug这个插件实现, 安装插件 yarn add MinCssExtractPlug --dev webpack.config.js配置如下 const { CleanWebpackPlugin } = require('clean-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtract.
[Node] Node.js Webpack和打包过程
CoderHing的博客~
10-17 5711
[Node] Node.js Webpack和打包过程 webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法 后续我们需要通过babel进来转换和设置。所以安装webpack时 我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的 而是类似于自己的vue-service-cli的东西)在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。显示路径会出现一些问题;
webpack优化入门详解
05-26
Webpack 是一个常用于打包 JavaScript 应用程序的工具，它的主要作用是将多个 JavaScript 文件打包成一个或多个文件，并且可以处理其他资源文件，如 CSS、图片等。在实际开发中，随着项目规模的增大，Webpack 打包...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

温情key

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

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

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

打赏作者

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

抵扣说明：

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

余额充值