webpack提取css成单独文件、css兼容性处理、压缩css

一、提取css成单独文件

背景：

我们之前打包构建的样式是在js中的，因为有css-loader将样式资源整合到js中了，而样式在js中会让js体积变得非常大，下载速度变得很慢，同时呢，是先加载js才能创建style标签插入到页面中，这里会出现闪屏现象，所以我们要做的事就是将css文件从js中提取出来。

解决方案：

如果想让css单独打包成一个独立的文件需要下载插件mini-css-extract-plugin。

该插件提供了一个MiniCssExtractPlugin.loader，这个loader取代style-loader，作用：提取js中的css成单独文件

下载：

npm i mini-css-extract-plugin@0.9.0

引入：

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

使用：

module.exports = {
  plugins: [
      new MiniCssExtractPlugin({
        // 对输出的css文件进行重命名
        filename: "assets/css/main.css",
      }),
    ],
}

webpack.config.js详细配置如下：

const { resolve } = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "assets/js/index.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 这个loader取代style-loader，作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: "assets/css/main.css",
    }),
  ],
  devServer: {
    contentBase: resolve(__dirname, "dist"),
    compress: true,
    port: 3000,
    open: true,
  },
  mode: "development",
};

二、css兼容性处理

需要使用postcss库，postcss要想在webpack中使用的话要使用postcss-loader，除了这个loader之外还需要使用postcss-preset-env插件，

postcss-preset-env作用：

能够帮助postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容样式，能够让我们兼容性做得精确到某一个浏览器的版本。

在package.json设置browserslist，开发环境只要兼容主要一些调试的浏览器版本就行，而生产环境需要多配置一些，兼容99.8%的浏览器，不要已经死的浏览器比如IE10

下载postcss库

npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D

配置有两种写法

第一种写法：使用loader的默认配置：post-loader

第二种写法：自定义，修改loader配置的话，需要写成一个对象

module.exports = {
  module: {
      rules: [
        {
            loader:"postcss-loader",
            options:{
              ident:"postcss",
              plugins:()=>[
                // postcss的插件
                require("postcss-preset-env")()
              ]
            }
        }
      ]
    }
}

webpack.config.js详细配置如下：

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 设置nodejs环境变量
process.env.NODE_ENV = "development";
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "assets/js/index.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 这个loader取代style-loader，作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          "css-loader",
          // 使用loader的默认配置
          // "postcss-loader",
          //修改loader的配置
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [require("postcss-preset-env")()],
            },
          },
          /*
            "browserslist":{
              // 开发环境-》设置node环境变量：process.env.NODE_ENV = "development"
              "development":[
                  "last 1 chrome version",
                  "last 1 firefox version",
                  "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境，所以顶部需要配置成开发环境
              "production":[
                  ">0.2%",
                  "not dead",
                  "not op_mini all"
              ]
          }
          */
        ],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: "assets/css/main.css",
    }),
  ],
  devServer: {
    contentBase: resolve(__dirname, "dist"),
    compress: true,
    port: 3000,
    open: true,
  },
  mode: "development",
};

三、压缩css

需要使用optimize-css-assets-webpack-plugin插件（一般兼容性处理需要使用loader，压缩之类的需要插件来做）

下载

optimize-css-assets-webpack-plugin

npm i optimize-css-assets-webpack-plugin@5.0.3

引入

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

调用

module.exports = {
  plugins:[
    new OptimizeCssAssetsWebpackPlugin()
  ]
}

webpack.config.js详细配置如下：

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
// 设置nodejs环境变量
process.env.NODE_ENV = "development";
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "assets/js/index.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 这个loader取代style-loader，作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          "css-loader",

          //修改loader的配置
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [require("postcss-preset-env")()],
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: "assets/css/main.css",
    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  devServer: {
    contentBase: resolve(__dirname, "dist"),
    compress: true,
    port: 3000,
    open: true,
  },
  mode: "development",
};

来自：https://mp.weixin.qq.com/s/Iiw78_VJeJV-leGFllRoQA

链接: https://www.fly63.com/article/detial/11048