Webpack23配置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"}) } ] }

第五步，在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”管用。有什么疑问可以在下方或者我的微博中留言。