webpack - webpack 提取 css 成单独文件、css 兼容性处理、压缩 css 等详细教程操作（示例解析 webpack 提取 css 为单独文件）

介绍

关于webpack提取css为单独文件的相关问题，包括了css兼容性处理以及压缩css等内容，下面一起来看一下，希望对大家有帮助。

安装插件并引入

npm install mini-css-extract-plugin -D

constMiniCssExtractPlugin=require('mini-css-extract-plugin')

配置插件plugins

plugins:[newHtmlWebpackPlugin({template:'./src/index.html'}),newMiniCssExtractPlugin({filename:'css/built.css'//对输出的文件进行重命名,默认为main.css})],

修改loader文件

{test:/.css$/,use:[//取代css-loader,提取js中css成单独文件（注意）MiniCssExtractPlugin.loader,//将css文件整合到JS文件中'css-loader',]},

css兼容性处理

一、安装插件：

npm install postcss-loader postcss-preset-env-D

二、在module中配置postcss-loader并配置postcss-preset-env插件

{test:/.css$/,use:[//取代css-loader,提取js中css成单独文件MiniCssExtractPlugin.loader,//将css文件整合到JS文件中'css-loader',//css兼容性处理：postcss --> postcss-loader postcss-preset-env//帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式{loader:'postcss-loader',options:{ident:'postcss',//默认配置plugins:()=>[require('postcss-preset-env')()]}}]},

三、配置package.json中的browserslist

"browserslist":{"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production":[">0.1%","not dead","not op_mini all"]}

四、为了使package.json中browserslist中的development环境生效，需要在webpack.config.js中配置环境，因为默认是生产环境，我们开发需要开发环境

const{resolve}=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin')constMiniCssExtractPlugin=require('mini-css-extract-plugin')//设置node.js环境变量,默认是生产环境，配置后为开发环境；process.env.NODE_ENV='development';

压缩css

一、安装插件并引用

npm install optimize-css-assets-webpack-plugin -D

constOptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')

二、在plugins中配置插件

plugins:[newHtmlWebpackPlugin({template:'./src/index.html'}),newMiniCssExtractPlugin({filename:'css/built.css'//对输出的文件进行重命名}),//压缩css文件newOptimizeCssAssetsWebpackPlugin()],