单独将所有css抽取成一个文件
- 通过使用mini-css-extract-plugin插件将项目中的所有css文件都整合到同一个css文件中然后html通过link标签引入
首先通过命令
npm install -D mini-css-extract-plugin
安装mini-extract-plugin插件
然后在需要使用该插件的配置文件中例如webpack.prod.js引入该插件
然后注册该插件
最后将所有的style-loader替换成
MiniCssExtractPlugin.loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { plugins: [ new MiniCssExtractPlugin({ // 指定输出文件 filename: 'static/css/main.css' }) ] }
最后运行
npm run build
命令即可在打包输出文件夹中找到该css文件了
处理css样式与浏览器不兼容
- 通过使用postcss-loader可以解决这个问题,但是postcss-loader依赖于postcss,然后postcss又使用到了postcss-preset-env,所以得同时安装三个包
通过命令
npm install -D poscss-loader postcss postcss-preset-env
安装需要使用到的包
然后在webpack的配置文件中将module.exports中的rules中使用到了css-loader的rule添加postcss-loader
module.exports = { module: { rules: [ { test: /\.css$/, // 正则表达式,用于匹配需要加载的文件 use: [ MiniCssExtractPlugin.loader, "css-loader", { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ 'postcss-preset-env' ] } } }, ] // 使用的加载器插件模块,从右向左调用插件 } ] } }
最后在package.json文件中添加browerslist配置项
- last 2 version: 即只对浏览器最新的两个版本做css兼容
- > 1% : 即对99%的浏览器做兼容
- not dead: 即对还在使用的浏览器做兼容
{ "browerslist": [ "last 2 version", "> 1%", "not dead" ] }
最后运行
npm run build
命令即可自动打包生成兼容指定浏览器的css文件