Webpack 4：有条件地启用PostCSS插件

Question

Webpack 4：有条件地启用PostCSS插件

javascriptnode.jswebpackwebpack-4postcss

8

我已将PostCSS集成到Webpack中，使用单独的postcss.config.js文件。

我想在生产构建时启用cssnano，并在开发构建时禁用它。如何做到这一点？

这是我的webpack.config.js：

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

const path = require('path');

module.exports = (env, argv) =>
{
    //const isProduction = (process.env.WEBPACK_MODE === 'production')
    const isProduction = argv.mode === 'production' || process.env.NODE_ENV === 'production';

    const config = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[contenthash].js',
            chunkFilename: '[name].[contenthash].js'
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        // fallback to style-loader in development
                        //process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                sourceMap: true
                            }
                        },
                        //'css-loader?-url',
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true,
                                sourceMap: true,
                                url: false
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'resolve-url-loader',
                            options: {
                                sourceMap: true,
                                debug: false
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                outputStyle: 'compressed',
                                sourceMapContents: false
                            }
                        }
                    ]
                }
            ]
        },

        plugins: [
            new CleanWebpackPlugin('dist', {
                watch: true
            }),
            new MiniCssExtractPlugin({
                // Options similar to the same options in webpackOptions.output
                // both options are optional
                filename: isProduction ? "live.[contenthash].css" : "live.css",
                chunkFilename: "[name].[contenthash].css"
            }),
            new ManifestPlugin()
        ]
    }

    return config;
}

这是我的 postcss.config.js 文件

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-url'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        })
    ]
}

其次，建议使用单独的postcss.config.js文件吗？我看到一些示例中PostCSS插件是在webpack.config.js中定义的，而其他示例则在单独的文件中完成。

- PeterB

2个回答

3

在你的postcss.config.js文件中，你可以进行环境属性的检查：

module.exports = ({ env }) => ({
  plugins: [
    require('postcss-import')(),
    require('postcss-url')(),
    require('autoprefixer')(),
    env === 'production' ? require('cssnano')({preset: 'default' })() : false,
  ]
})

- sergdenisov

如果我想添加一个检查，检查VueJs全局状态是否包含值this，然后执行这个操作，否则执行那个操作，你有什么建议？ - Hanzla Habib

似乎webpack插件数组不能包含布尔值：

- configuration.plugins [0]应该是以下之一：
   object { apply, … } | function```

- Titenis

@Titenis 我认为这取决于版本。原始答案是两年前写的，最新版本可能会有所改变。 - sergdenisov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Doblado · Accepted Answer

选项1. 使用webpack-merge

使用webpack-merge，您可以根据NODE_ENV创建条件配置，并在执行时将它们合并为一个单一的配置。优点是您不会创建重复的代码，所有内容都可以在一个文件中完成。唯一的缺点是需要使用一个新的包。

const ENV = process.env.NODE_ENV

let Config = {

  //Other shared configurations by production and development

  plugins: [
    new webpack.ProgressPlugin(),
    new CopyWebpackPlugin([
      { from: 'public', to: 'public' },
    ])
  ]

}

if (ENV === 'production') {
  Config = merge(Config, {
    plugins: [
      new MiniCssExtractPlugin({
        filename: "public/styles.css"
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessor: cssnano,
        cssProcessorOptions: {
          parser: safe,
          discardComments: { removeAll: true }
        }
      })
    ],
    mode: 'production'
  })
}

if (ENV === 'development') {
  Config = merge(Config, {
    devtool: 'source-map',
    mode: 'development',
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new StyleLintPlugin(
        {
          emitErrors: false,
          configFile: '.stylelintrc',
          context: 'src',
          files: '**/*.pcss',
        },
      ),
    ]
  })
}

const WebpackConfig = Config

选项2. 使用不同的配置文件

可以创建两个分离的文件webpack.config.prod.js和webpack.config.dev.js，并使用不同的npm脚本来调用它们。这种解决方案的问题在于存在代码重复。