webpack postcss-loader和autoprefixer给css3样式添加浏览器兼容

.webpack postcss-loader和autoprefixer给css3样式添加浏览器兼容

1.假设你已经熟悉webpack基本环境的搭建 npm init -y
2,创建webpack.confg.js文件
3、安装 npm i -D postcss-loader autoprefixer
4、webpack.confg.js配置

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
		entry: './src/index.js',
		output: {
			path: path.resolve(__dirname, 'demo'),
			filename: 'bundle.js',
			clean: true
		},
		plugins: [
			new HtmlWebpackPlugin({
				title: '你是',
				filename: 'app.html',
				template: './src/index.html',
				inject: 'body',
				minify: true

			}),
			require('autoprefixer') //注意这个需要加
			

		],
		//优化的配置（压缩资源需要配置）
		// optimization:{
		// 	minimizer:[new CssMinizerplugin] 
		// },
		module: {
			rules: [
				// exclude 排除，不需要编译的目录，提高编译速度
				{
					test: /\.js$/,

					exclude: /node_modules/,
					use: {
						loader: 'babel-loader',
						options: {
							presets: ['@babel/preset-env']
						}
					}

				},
				{
					test: /\.css$/,
					use: [{
							loader: 'style-loader'
						},
						{
							loader: 'css-loader',
							options: {
								
								importLoaders: 2,
								
							}
						},
						{
							loader: 'postcss-loader' //这个
						}
					]
					},


					// {
					// 	test: /\.(png|jpg)$/,
					// 	use: 'file-loader'

					// },
					{
						test: /\.(png|jpg|gif)$/,
						use: [{
							loader: 'url-loader',
							options: {
								limit: 8192
							}
						}]
					},
					



				]
			},

			// module: {
			//     rules: [
			//         {
			//             test: /\.(css|less)$/,
			//             use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] //合并配置loader
			//         }
			//     ],

			// },
			// mode: 'development'
			// mode: 'production' ,//压缩资源配置
			devServer: {
				// contentBase: __dirname, -- 请注意，这种写法已弃用
				static: {
					directory: path.join(__dirname, "/"),
				},
			},

			mode: 'none' //压缩资源配置
		}

###5.创建一个在项目根目录创建 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};