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