【Webpack】CSS 处理

CSS 处理

提取 Css 成单独文件

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

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

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

1. 下载包

npm i mini-css-extract-plugin -D

2. 配置

  • 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");

    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"],
    },
    {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

3. 运行指令

npm run build

Css 兼容性处理

1. 下载包

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

2. 配置

  • 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");

    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",
    ],
    },
    {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

3. 控制兼容性

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

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

想要知道更多的 browserslist 配置,查看browserslist 文档open in new window

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

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

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

4. 合并配置

  • 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"),
    },
    {
    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",
    }),
    ],
    // devServer: {
    // host: "localhost", // 启动服务器域名
    // port: "3000", // 启动服务器端口号
    // open: true, // 是否自动打开浏览器
    // },
    mode: "production",
    };

5. 运行指令

npm run build

Css 压缩

1. 下载包

npm i css-minimizer-webpack-plugin -D

2. 配置

  • 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");

    // 获取处理样式的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",
    };

3. 运行指令

npm run build

默认生产模式已经开启了:html 压缩和 js 压缩,所以她们不需要额外进行配置。

相关推荐
Martin -Tang24 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发25 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html