webpack css处理

css处理

处理之前：Css文件被打包到js文件中，当js文件加载时创建style标签生成样式（会闪屏）

预期效果：通过link标签加载，生成单独的css文件

遇事不决看官网webpack.docschina.org/plugins/

插件基于webpack v5新特性，需要webpack5才能支持

• 安装

npm install --save-dev mini-css-extract-plugin

• 引入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
    new ESLintWebpackPlugin({
        // 指定检查文件的根目录
        context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
        // 以 public/index.html 为模板创建文件
        // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
        template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin()
]

css兼容性处理

• 下载包 npm i postcss-loader postcss postcss-preset-env -D
• 配置（放在css-loader后面）

{
    // 用来匹配 .css 结尾的文件
    test: /.css$/,
    // use 数组里面 Loader 执行顺序是从右到左
    use: [MiniCssExtractPlugin.loader, "css-loader",{
        loader: "postcss-loader",
        options: {
            postcssOptions:{
                plugins: ['postcss-preset-env']
            }
        }
    }],
}

• 控制浏览器兼容版本package.json

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

css压缩

• 下载

npm install css-minimizer-webpack-plugin --save-dev

• 使用

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

plugins:[
    //css压缩
    new CssMinimizerPlugin()
]