Использование autoprefixer с postcss в webpack 2.x

Ответ 1

Webpack 2.x.x - это убийца и прерыватель сборки

webpack 2.x.x введен плагин webpack.LoaderOptionsPlugin(), где вам нужно определить все плагины параметров загрузчика. Например, autoprefixer является плагином для postcss-loader. Итак, он должен идти здесь.

И

• module.rules заменяет module.loaders
• Все загрузчики должны явно сказать, что они являются загрузчиками. Ex. loader: 'style!css' должен быть loader: 'style-loader!css-loader'

Новая конфигурация будет выглядеть примерно так:

...

module: {
  rules: [
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
     }
   ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
     }
  })
],

...

Надеюсь, это поможет всем.

Ответ 2

Нет необходимости использовать LoaderOptionsPlugin. Теперь вы можете передавать параметры непосредственно в декларацию загрузчика.

const autoprefixer = require('autoprefixer');

let settings = {
    /*...*/
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                /*...other loaders...*/
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [autoprefixer]
                        }
                    }
                }
                /*...other loaders...*/
            ]
        }]}         
    }
    /*...*/
};

Если вам необходимо предоставить определенную конфигурацию совместимости, вы можете передать ее как аргумент функции autoprefixer:

options: {
    plugins: function () {
        return [autoprefixer('last 2 versions', 'ie 10')]
    }
}

Ответ 3

По состоянию на 20 июля 2017 года, чтобы настроить Autoprefixer с помощью Webpack v2.4.1, я сделал следующее:

Установите необходимые загрузчики:

yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader

создайте файл postcss.config.js в корневой директории вашего проекта:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

В вашем корневом уровне package.json укажите браузеры, которые вы хотите поддерживать:

"browserslist": ["defaults", "not ie < 11"]

В вашем webpack.config.js файле module.rules укажите своих загрузчиков с помощью postcss-loader, следующих за css-loader (я также использую scss):

  {
    test: /\.scss$/,
    use: [
      {
        loader: 'style-loader' // Adds CSS to the DOM by injecting a <style> tag
      },
      {
        loader: 'css-loader' //  interprets @import and url() like import/require() and will resolve them.
      },
      {
        loader: 'postcss-loader', // postcss loader so we can use autoprefixer
        options: {
          config: {
            path: 'postcss.config.js'
          }
        }
      },
      {
        loader: 'sass-loader' // compiles Sass to CSS
      }
    ],
  },

Ответ 4

Текущая webpack.config.js для использования autoprefixer и postcss с webpack 2.1.0-beta.27

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: { filename: 'bundle.js', publicPath: '' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader' },
        ]
      },
      {
        test: /\.js$/,
        use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } } ],
        exclude: /node_modules/,
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

Примечание. LoaderOptionsPlugin - это 'polyfill', требуемый в webpack =< 2.1.0-beta.24. Я буду обновлять этот ответ, когда я выработаю новый синтаксис.

Запуск:

В package.json выполните следующие пакеты:

"dependencies": {
  "autoprefixer": "^6.5.4",
  "babel-core": "^6.7.6",
  "babel-loader": "^6.2.4",
  "babel-preset-es2015": "^6.6.0",
  "babel-preset-react": "^6.5.0",
  "babel-preset-stage-2": "^6.5.0",
  "babel-register": "^6.7.2",
  "babel-runtime": "^6.6.1",
  "css-loader": "^0.26.1",
  "postcss-loader": "^1.2.1",
  "style-loader": "^0.13.1",
  "webpack": "2.1.0-beta.27",
  "webpack-dev-server": "2.1.0-beta.12"
}

И следующие релевантные script в package.json:

"scripts": {
  "dev": "NODE_ENV=dev webpack-dev-server --port 3000 --inline --hot"
},

И запустите его с помощью

yarn install
npm run dev