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

单独文件

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