将 postcss 和 autoprefixer 添加到 webpack 2 不会添加前缀

Question

我正在尝试迁移到 webpack 2，但我似乎无法让 postcss-loader 自动前缀。我阅读了文档，但似乎找不到问题。有没有人遇到过这个问题？如果是这样，您能帮我解决我的问题吗？

webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');

// development variables
const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

// checks if production : development
const entry = PRODUCTION
    ?   [
            './src/index.js'
        ]
    :   [
            './src/index.js',
            'webpack/hot/dev-server',
            'webpack-dev-server/client?http://localhost8080',
    ];

const plugins = PRODUCTION
    ?   [
            new webpack.optimize.UglifyJsPlugin(),
            new ExtratTextPlugin('style-[contenthash:10].css'),
            new HTMLWebpackPlugin({
                template: 'index-template.html'
            })
        ]
    :   [
            new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer(), ] } }),
            new webpack.HotModuleReplacementPlugin(),
        ];

plugins.push(
    new webpack.DefinePlugin({
        DEVELOPMENT: JSON.stringify(DEVELOPMENT),
        PRODUCTION: JSON.stringify(PRODUCTION),
    })
);

// add class name depending on enviroment PROD | DEV
const cssIndentifier = PRODUCTION ? '[hash:base64:10]' : '[path][name]---[local]';

// inject into head in DEV and create CSS file in PROD
const cssLoader = PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?localIdentName=' + cssIndentifier + ',postcss-loader'];

module.exports = {
    devtool: 'source-map', //add source mapping to devtools
    entry: entry,
    plugins: plugins,
    externals: {
        jquery: 'jQuery' //jquery is external and availabe at the global variable jQuery
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader:['babel-loader'],
            exclude: /node_modules/
        }, {
            test: /\.(png|jpg|gif)$/,
            loader:['url-loader?10000&name=images/[hash.12].[ext]'],//use url loader if image is over 10k : use file loader
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loaders: cssLoader,
            exclude: /node_modules/
        }]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: PRODUCTION ? '' : '/dist/',
        filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
    }
};


package.json
{
  "name": "starter",
  "version": "1.0.0",
  "description": "starter project using webpack 2",
  "main": "index.js",
  "scripts": {
    "build": "rimraf dist && NODE_ENV=production webpack",
    "dev": "NODE_ENV=development webpack-dev-server"
  },
  "repository": "https://github.com/rafh/starter-project.git",
  "author": "Rafael Heard rafael.heard@gmail.com",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "css-loader": "^0.26.2",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "loader": "^2.1.1",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.6.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Answer 1

您的 webpack 配置存在一些问题，坦率地说，我不知道是哪一个导致了问题，所以我将概述所有问题，希望其中一个可以解决问题。

cssLoader 不正确地定义了数组，据我所知 - 箭头意外地包含在带有加号的字符串中，当它应该分隔数组时：

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?importLoaders=1&minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader'];

对于 webpack 2，使用加载器的正确语法是 use 而不是 loaders/loader，如下所示：

{
    test: /\.css$/,
    use: cssLoader,
    exclude: /node_modules/
}

postcss-loader 还建议在之后使用css-loader 时使用?importLoaders=1，因此您应该将其添加到css-loader 的定义中：

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader']

最后，options 应该直接传递给加载器。 LoaderOptionsPlugin.options.postcss 并不理想（而且我在文档中的任何地方都看不到支持的语法），并且在定义加载器时应该传递选项。将 cssLoader 中的字符串 'postcss-loader' 替换为此行为的对象。

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   [
             'style-loader',
             'css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 
             {
                 loader: 'postcss-loader',
                 options: {
                     plugins: function () { return [ autoprefixer ] }
                 }
             }
        ]

postcss 加载器自述文件指定 options.plugins 应该是一个返回数组的函数，这是一种奇怪的工作方式。如果return [ autoprefixer ] 不起作用，自述文件说要使用return [ require('autoprefixer') ]，所以试试吧。

我不确定其中哪一个会导致此问题，但希望通过您的 webpack 配置解决这些问题将解决您的加载程序问题。

Answer 2

我遇到了同样的问题，这对我有帮助：

1) 添加到你的 webpack.config.js 这个：

module.exports = {
    module: {
        rules: [
            {
                test:   /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            }
        ]
    }
}

2) 然后创建一个 postcss.config.js ：

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