webpack - ロスト、autoprefixer、postcss-flexibility の使用方法は?

Question

autoprefixer、lost、postcssflexibilityでwebpack?を使用する順序を知りたいです。

Answer 1

以下は基本的な例です (postcss によるプレフィックス、precss プラグインの適用など)。

ウェブパック 1

const autoprefixer = require('autoprefixer');
const precss = require('precss');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css', 'postcss'],
      },
    ],
  },
  // PostCSS plugins go here
  postcss: function () {
    return [autoprefixer, precss];
  },
};

ウェブパック2

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss', // Needed for now
            plugins: function () {
              // Set up plugins here
              return [
                require('autoprefixer'),
                require('precss'),
              ];
            },
          },
        },
      ],
    },
  ],
},

もう 1 つの方法は、 postcss-loaderのドキュメントで説明されているように、プラグインをpostcss.config.jsにプッシュすることです。しかし、それを構成することはより困難です。

ソース。