webpack学习笔记-配置webpack进行css兼容处理
配置文件:
module.exports = {
entry: '', // 入口文件
output: {}, // 出口文件
module: {}, // 处理对应模块
plugins: [], // 对应的插件
devServer: {}, // 开发服务器配置
mode: 'development' // 模式配置
}
1.安装插件postcss-loader和autoprefixer
npm install --save-dev postcss-loader autoprefixer
2.编写webpack.config.xml,这里特别注意postcss的配置,在这里博主搞了一下午才搞懂这个。
module.exports={ //__dirname是nodejs中的一个全局变量,它指向我们项目的根目录 //入口文件的位置 entry:__dirname+'/app/main.js', //出口文件 output:{ //打包后的文件放置的位置 path:__dirname+'/public', //打包后文件名 filename:'webpack.js' }, module: { rules: [ { test: /\.json$/, type:'javascript/auto', use: 'json-loader' }, { test:/\.css$/, loader:[ 'style-loader', 'css-loader', { loader:'postcss-loader', options:{ sourceMap:true, //设置配置postcss配置文件 config:{ path:'./postcss.config.js' } } } ] } ] }, };
3.编写postcss.config.js
module.exports = { plugins: [ //注意这里的参数,如果不传参数是不会做任何处理 require('autoprefixer')({ "browsers": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] }) ] };
4.编译,编译和以前一样
5.看效果