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 loadertest: /\.js?$/,exclude: /node_modules/,loader: "babel-loader"}, {test: /\.(png|jpg|jpng)$/, // pack imagesloader: '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 filesloader: 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-domnew ExtractTextPlugin("index.css"), // pack all the sass and css files into index.csssnew webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin(),new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('development')})]

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

Webpack2/3配置ExtractTextPlugin和Autoprefixer相关推荐

webstorm环境安装配置（less+autoprefixer）
node安装: 参考地址:http://www.runoob.com/nodejs/nodejs-install-setup.html 1.下载node安装包并完成安装 2.在开始菜单打开node 3 ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
webpack——一站到底一
webpack入门 webpack在逐渐成为一个成熟的青年路上,一直备受大家青睐, 然而还在不断的健身,希望以最好的姿态呈现给各位,如今他已经v3. 比起1 .2又强化骨骼,变得更坚实. 一.什么是w ...
webpack的css压缩不兼容IOS8问题探索
webpack使用postcss的autoprefixer插件,并在压缩css时使用了cssnano,处理不当的情况下会导致压缩css后,部分兼容前缀(比如-webkit-)被删除的问题. postc ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
一个nuxt(vue)+mongoose全栈项目聊聊我粗浅的项目架构
这是一篇求职文章年龄21 坐标成都找一份vue.js移动端H5工作一份没有任何包装纯真实的简历简历戳这求职文章一共有两篇另外一篇请点击一个基于Vue+TypeScript的[移动端]Vue ...
webpack — 概述介绍
webpack概述 webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web 开发中所面临的困境. webpack提供了友好的模块化支持,以及代码压缩混淆.处理js兼容问题.性能优化 ...
webpack之font-awesome
1.安装font-awesome和font-awesome-loader及依赖 git:https://github.com/shakacode/font-awesome-loader npm ins ...
vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

Webpack2/3配置ExtractTextPlugin和Autoprefixer

Webpack2/3配置ExtractTextPlugin和Autoprefixer相关推荐

最新文章

热门文章