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

Question

我正在尝试迁移到webpack 2，我似乎无法将postcss-loader加载到autoprefix。我阅读文档，但我似乎无法找到问题。有没有人遇到这个问题？如果是这样，你能帮我解决我的问题吗？

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使用时也暗示的?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') 
    ] 
}