webpack中使用postcss-loader，按照官网的方法配置但是无法完成

Question

官网上的写法是这样

结果我写完之后

运行发现依然报错

说是配置文件找不到这个api，不知道什么原因

Answer 1

一个完整的例子
webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    main: './index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: 'static/js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  context: path.resolve(__dirname, 'src'),
  module: {
    rules: [{
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader'])
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: ['file-loader?name=static/images/[name].[ext]']
      }
    ],
  },
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    }),
    new ExtractTextPlugin('static/css/[name].css'),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html'
    }),
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'public/favicon.ico')
    }])
  ],
  performance: {
    hints: false
  }
}
if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    })
  ])
}

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-cssnext")()
  ]
}

文件目录如下

Answer 2

看你的报错，你用的webpack2？webpack2 的 postcss 是咋配置的？

Answer 3

首先确定你的node版本，之前4.*的版本是不支持箭头函数的，需要改成

postcss: function () {
    return  [
        require('autoprefixer')
    ]
}

然后检查你是否安装了你所用到的包，postcss,postcss-loader, autoprefixer

Answer 4

你应该是使用了默认安装的webpack@2.x ，配置和1.x不一样的。推荐使用LoaderOptionsPlugin

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

参考文档webpack@2.x