Webpack2/3配置ExtractTextPlugin和Autoprefixer

在网上搜索了三个小时，都是各种老版本的用法，完全不work，最后还是从官方文档中总结出来，赶紧分享给大家，希望更多朋友少走弯路。官方文档：https://github.com/postcss/postcss-loader

第一步，当然是安装extract-text-webpack-plugin，postcss-loader和autoprefixer了。

npm install extract-text-webpack-plugin postcss-loader autoprefixer --save

第二步，新建一个文件取名postcss.config.js，添加如下代码，也就是兼容最新的5个浏览器版本。

module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}

第三步，在webpack.config.js开头加入如下引用

var ExtractTextPlugin = require('extract-text-webpack-plugin');

第四步，在webpack.config.js中的module加入loader，见下方代码的最后一条，添加了对scss,sass,css的解析，有一点需要注意，根据官方文档中的描述，postcss-loader需要在style-loader和css-loader之后，其他loader（比如sass-loader）之前。

module: {
loaders: [{    // babel loader
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader"
}, {
test: /\.(png|jpg|jpng)$/, // pack images
loader: 'url-loader?limit=8192&name=resource/image/[name]-[hash:8].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?[a-z0-9]+)?$/,
loader: 'url-loader?limit=1000&name=resource/fonts/[name]-[hash:8].[ext]'
},
{
test: require.resolve('jquery'),
loader: 'expose-loader?$!expose-loader?jQuery', // jQuery and $
},
{
test: /\.ejs$/,
loader: 'ejs-loader',
},
{
test: /\.(scss|sass|css)$/,  // pack sass and css files
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!postcss-loader!sass-loader"})

4000
}
]
}

第五步，在webpack.config.js中的plugins加入打包后的css文件名，这里取名为index.css。

plugins: [
new HtmlWebpackPlugin({
template: 'src/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.CommonsChunkPlugin("vendor.bundle.js"), //packed independently such as react and react-dom
new ExtractTextPlugin("index.css"), // pack all the sass and css files into index.csss
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]

完成以上五步之后，亲测对”webpack”: “^3.1.0”管用。有什么疑问可以在下方或者我的微博中留言。