Wabpack 打包 - 9. CSS 兼容性处理
不同型号、版本的浏览器对CSS的支持程度不同,使用 postcss 插件对不同的浏览器做兼容。
1.文件结构
2.安装 postcss
$ npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D
3. a.css
#box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; }
b.css
#box2 { width: 200px; height: 200px; background-color: deeppink; }
index.js
import '../css/a.css';
import '../css/b.css';
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
webpack.config.js
const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') //设置 nodejs 环境变量 // process.env.NODE_ENV = 'development' module.exports = { entry: './src/js/index.js', output: { filename: "js/built.js", path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', /* css兼容性处理:postcss --> postcss-loader postcss-preset-env 插件 postcss 依赖于 post-loader. 帮 postcss 找到 package.json 中 browserslist 里面的配置,通过配置加载指定的css兼容性样式 "browserslist": { // 开发环境 --> 设置node环境变量:process.env.NODE_ENV = development "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生产环境:默认是看生产环境 "production": [ ">0.2%", "not dead", "not op_mini all" ] }, "last 1 chrome version" 表示兼容最近版本的 chrome ">0.2%" 表示大于 99.8% 的浏览器 "not dead" 表示不要已经死去的浏览器(如 IE10) "not op_mini all" 表示要 欧朋mini 浏览器 (不兼容已经死去的浏览器) 执行webpack命令打包后,查看生成的css文件,对有兼容性的代码,会做兼容性处理 */ // 使用loader的默认配置 // 'postcss-loader', // 修改loader的配置 { loader: "postcss-loader", // 修改loader的配置 options: { ident: 'postcss', plugins: () => [ //postcss 的插件 require('postcss-preset-env')() ] } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html" }), new MiniCssExtractPlugin({ filename: 'css/built.css' }) ], mode: "development" }
package.json
{ "name": "webpack_code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.8.4", "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.18.10", "add-asset-html-webpack-plugin": "^3.2.2", "babel": "^6.23.0", "babel-loader": "^8.0.6", "core-js": "^3.24.1", "css-loader": "^3.4.2", "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-loader": "^3.0.3", "eslint-plugin-import": "^2.20.1", "file-loader": "^5.0.2", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "less": "^3.11.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "style-loader": "^1.1.3", "terser-webpack-plugin": "^2.3.5", "thread-loader": "^2.1.3", "url-loader": "^3.0.0", "webpack": "^4.41.6", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3", "workbox-webpack-plugin": "^5.0.0" }, "dependencies": { "jquery": "^3.6.0" }, "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }, "eslintConfig": { "extends": "airbnb-base", "env": { "browser": true } }, "sideEffects": [ "*.css", ".less" ] }
4.打包:
$ webpack
5.生成文件
生成的 css 文件已经做了兼容性处理。
end~