Webpack: 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const path = require('path');
 
module.exports = (env, argv) => {
  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
        {
          test: /\.(scss|css)$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
          ],
        },
      ],
    },
    optimization: {
      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    plugins: [new MiniCssExtractPlugin({ filename: 'style.css' })],
  };
};

这个配置文件展示了如何使用Webpack 4来处理JavaScript和SCSS文件，并利用MiniCssExtractPlugin将CSS提取到一个独立的文件中，同时使用了TerserJSPlugin和OptimizeCSSAssetsPlugin来优化JavaScript和CSS代码。