webpack - webpack 提取 css 成单独文件、css 兼容性处理、压缩 css 等详细教程操作

在 webpack 中，提取 CSS 成单独文件、处理 CSS 兼容性和压缩 CSS 都可以通过使用不同的插件来实现。下面是一个详细的操作教程：

1. 安装依赖：在项目根目录下运行以下命令来安装必要的依赖：

npm install --save-dev style-loader css-loader mini-css-extract-plugin postcss-loader autoprefixer cssnano

1. 配置 webpack：在项目根目录下找到 webpack.config.js 文件，并进行以下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  // 其他配置项...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
  optimization: {
    minimizer: [
      new cssnano({
        preset: ['default', {
          discardComments: {
            removeAll: true,
          },
        }],
      }),
    ],
  },
};

1. 创建 postcss.config.js：在项目根目录下创建 postcss.config.js 文件，并进行以下配置：

module.exports = {
  plugins: [autoprefixer],
};

1. 运行构建命令：运行以下命令来构建项目：

webpack

以上步骤完成后，webpack 将会提取 CSS 成为单独的文件，并且自动处理 CSS 的兼容性和压缩。

请注意，以上教程使用的是最新版本的 webpack（4.x 版本及以上），如果你使用的是旧版本的 webpack，部分配置可能会有所不同。