css前缀匹配,postcss-preset-env 自动添加css兼容性前缀

### 代码在下面 这是webpack5 (关于browserslist的相关信息点击这里)

需要安装

postcss

postcss-loader

postcss-preset-env

// package.json

{

"name": "webpack-demo",

"version": "1.0.0",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack",

"watch": "webpack --watch",

"start": "webpack serve"

},

"author": "",

"license": "ISC",

"keywords": [],

"description": "",

"private": true,

"devDependencies": {

"clean-webpack-plugin": "^3.0.0",

"css-loader": "^5.0.1",

"file-loader": "^6.2.0",

"html-loader": "^1.3.2",

"html-webpack-plugin": "^4.5.1",

"mini-css-extract-plugin": "^1.3.4",

"postcss": "^8.2.4",

"postcss-loader": "^4.1.0",

"postcss-preset-env": "^6.7.0",

"style-loader": "^2.0.0",

"url-loader": "^4.1.1",

"webpack": "^5.11.1",

"webpack-cli": "^4.3.1",

"webpack-dev-server": "^3.11.1"

},

"dependencies": {

"lodash": "^4.17.20"

},

"browserslist": {

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

],

"production": [

"ie > 6",

">1%",

"not dead",

"not op_mini all"

]

}

}

// webpack.config.js

const path = require('path');

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

process.env.NODE_ENV = 'development'

module.exports = {

target: process.env.NODE_ENV == 'development' ? 'web' : 'browserslist',

// mode: "production",

mode: "development",

entry: {

'js/app': './src/index.js',

},

// devtool: 'inline-source-map',

devServer: {

compress: true,

open: false

},

output: {

publicPath: '/',

// 指定打包后输出的文件名

filename: 'app.[contenthash:10].js',

// 指定打包后输出的目录

path: path.resolve(__dirname, 'dist')

},

resolve: {

alias: {

"@": path.resolve(__dirname, 'src')

}

},

module: {

rules: [

{

// 匹配 [.html] 文件

test: /\.html$/,

// 符合的文件使用以下loader进行解析

use: ['html-loader']

},

{

// 匹配 [.css] 文件

test: /\.css$/,

// 符合的文件使用以下loader进行解析

use: [

MiniCssExtractPlugin.loader,

// 'style-loader',

'css-loader',

{

loader: "postcss-loader",

options: {

postcssOptions: {

plugins: [

require("postcss-preset-env")(),

]

}

}

},

]

},

{

test: /\.(png|jpg|gif|svg)$/,

use: [

{

loader: 'url-loader',

options: {

name: 'images/[name].[contenthash:10].[ext]',

limit: 1024 * 900,

esModule: false

}

},

]

},

{

include: /\.(eot|svg|ttf|woff|woff2)$/,

use: [

{

loader: "file-loader",

options: {

outputPath: "fonts"

}

}

]

},

{

exclude: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|svg|css|html|js)$/,

use: [

{

loader: 'file-loader',

options: {

name: '[name].[contenthash:10].[ext]',

}

}],

},

]

},

plugins: [

new CleanWebpackPlugin(),

new webpack.BannerPlugin({

banner: "bugfix2019"

}),

new HtmlWebpackPlugin({

title: '王二狗',

template: "src/index.html",

favicon: "src/assets/images/favicon.ico"

}),

new MiniCssExtractPlugin(

{ filename: 'css/app.[contenthash:10].css' }

)

]

};