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

介绍

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

安装插件并引入

npm install mini-css-extract-plugin -D

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

配置插件plugins

plugins: [
	new HtmlWebpackPlugin({
		template:'./src/index.html'
	}),
	new MiniCssExtractPlugin({
		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')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//设置node.js环境变量,默认是生产环境，配置后为开发环境；
process.env.NODE_ENV = 'development';

压缩css

一、安装插件并引用

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

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

二、在plugins中配置插件

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