在webpack 2.x中使用postcss的autoprefixer

Question

如何在webpack 2.x中使用autoprefixer。

以前，它是这样的...

...

module: {
  loaders: [
     {
       test: /\.scss$/,
        loader: 'style!css!sass!postcss'
     }
   ]
},
postcss: () => {
  return [autoprefixer]
},

...

但是，它不再起作用了。

如何重写以适应webpack@2.x.x？

- Pranesh Ravi

Answer 1

Webpack 2.x.x是一个强大的构建工具，也会导致构建失败

webpack 2.x.x 引入了 webpack.LoaderOptionsPlugin() 插件，你需要在这里定义所有的 loader 选项插件。比如，autoprefixer 是一个用于 postcss-loader 的插件。所以，它必须放在这里。

并且

• module.rules 替换了 module.loaders
• 所有的 loader 都应该明确地标明它们是一个 loader。例如，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(),
      ]
     }
  })
],

...

希望这能对每个人有所帮助。

- Pranesh Ravi

---

谢谢回答！正是我所需要的 :) - lightstrike

加载器：['style-loader'，'css-loader'，'sass-loader'，'postcss-loader']。这一行可以写成loader：'style！css！sass！postcss'，因为webpack会将style-loader隐式地视为style-loader等等... - solanki...

不再需要使用LoaderOptionsPlugin，可以查看@kreig的答案。 - McGiogen

Answer 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')]
    }
}

- kreig

---

Autoprefixer的文档建议将浏览器列表放在根级别的package.json中，以便其他工具在需要时可以访问它：https://github.com/postcss/autoprefixer#browsers - clhenrick

Answer 3

截至2017年7月20日，要在Webpack v2.4.1中设置Autoprefixer，我执行了以下操作：

安装必要的加载器：

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
      }
    ],
  },

- clhenrick

---

你能说明在 package.json 文件中应该放在哪里吗？ - Dan Zuzevich

@DanielZuzevich 这是一个 package.json 的示例 https://gist.github.com/clhenrick/7ee7bdc417b3128828992a1784f78b3d - clhenrick

谢谢。我点赞了这个，因为我喜欢外部配置解决方案，可以减少webpack配置中的不必要的条目。 - Dan Zuzevich

Answer 4

使用 autoprefixer 和 postcss 以及 webpack 2.1.0-beta.27 的当前 webpack.config.js 配置文件：

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是webpack =< 2.1.0-beta.24中所需的“polyfill”。当我弄清新语法时，我会更新这个答案。

运行它：

在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"
}

以下是 package.json 中相关的脚本：

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

并且运行它

yarn install
npm run dev

- svnm