1.下载相关依赖

npm i postcss-loader postcss postcss-preset-env -D

2.在webpack.config.js中配置

注意：postcss-loader要在css-loader后面配置

 

 3.写一个flex布局，flex是存在一定的兼容性问题的

4.打包

可以看到打包后未被处理

 

1.下载相关依赖

npm i postcss-loader postcss postcss-preset-env -D

2.在webpack.config.js中配置

注意：postcss-loader要在css-loader后面配置

3.写一个flex布局，flex是存在一定的兼容性问题的

4.打包

可以看到打包后未被处理

因为我们还要设置兼容到什么版本的浏览器

5.在pack.json中添加要兼容的浏览器

重新打包可以看到flex对ie进行了兼容处理 

6.完整代码

const path = require('path');//nodejs用来处理路径问题的模块
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {/**入口 */entry: './src/main.js',/**输出 相对路径*/output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, '../dist'),//所有文件的输出目录/**文件名 */filename: 'static/js/dist.js',//入口文件输出文件名clean: true,//在打包前将path整个目录内容情况},/**加载器 */module: {rules: [//loader的配置{/**test 代表要检测的文件 */test: /\.css$/, //只检测.css文件use: [MiniCssExtractPlugin.loader, 'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['postcss-preset-env']}}}],//对检测到文件使用哪些loader},{test: /\.less$/,//只检测.less文件//loader:'xxx',loader只能使用一个loader，use可以使用多个loaderuse: [MiniCssExtractPlugin.loader, 'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['postcss-preset-env']}}},'less-loader'],//对检测到文件使用哪些loader},{test: /\.s[ac]ss$/,//只检测.sass文件use: [MiniCssExtractPlugin.loader, 'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['postcss-preset-env']}}},'sass-loader'],},{test: /\.styl$/,//只检测.stylus文件use: [MiniCssExtractPlugin.loader, 'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['postcss-preset-env']}}},'stylus-loader']},{test: /\.(png|jpe?g|gif|webp)$/,type: 'asset/resource',parser: {dataUrlCondition: {//小于10kb的图标转base64，减少请求数量maxSize: 10 * 1024 // 10kb}},generator: {//输出图片名称//[hash:10]hash值取前10位filename: 'static/imgs/[hash:10][ext][query]'}},/**图标字体相关配置 */{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,//只对ttf、woff2资源起作用type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来generator: {filename: "static/media/[hash][ext][query]"}},{test: /\.js$/,/**排除哪些文件 */exclude: /(node_modules)/,loader: 'babel-loader',// options: {//     presets: ['@babel/preset-env'],// },},]},/**插件 */plugins: [//plugin配置new ESLintPlugin({/** 检测哪些文件 */context: path.resolve(__dirname, '../src')}),new HtmlWebpackPlugin({/**模板 */template: path.resolve(__dirname, '../src/public/index.html')}),new MiniCssExtractPlugin({filename: 'static/css/main.css'})],/**模式 */mode: 'production'
}