(一) 将css从js文件中抽离

安装mini-css-extract-plugin
```
npm i mini-css-extract-plugin -D
```

新建入口文件src/index.js，并引入css文件

import './css/base.css';
import './css/common.css';

新建src/css/base.css文件

.box1{
    width: 100px;
    height: 100px;
    background-color: pink;
}

新建src/css/common.css文件

.box2{
    width: 200px;
    height: 200px;
    background-color: red;
}

新建模板文件src/index.html文件

<div class="box1"></div>
<div class="box2"></div>

在项目根目录下修改webpack配置文件webpack.config.js

const path = require('path');


const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin')




module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, 'bulid')
},
module: {
rules: [
//处理css文件
{
test: /.css$/,
use: [miniCssExtractPlugin.loader, 'css-loader']
},
]
},
plugins: [
//以自己的html为模板
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new miniCssExtractPlugin({
//对输出css文件放入到css文件夹中并进行重新命名,会将所有文件都打包进bulit.css文件中
filename:'css/bulit.css'
})
]
}

进行打包
```
webpack
```

(二) css兼容性处理

[1]. postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css样式。
[2]. browserslist配置：https://www.npmjs.com/package/browserslist
[3]. browserslist中的development和production表示开发环境和生产环境，默认是生产环境，通过修改nodejs的环境变量process.env.NODE_ENV='development’来改变

安装postcss-loader和postcss-preset-env

npm i postcss-loader postcss-preset-env -D

在入口文件中src/index.js引入base.css文件
```
import './css/base.css'
```

创建src/css/base.css文件

.box{
   display: flex;
   backface-visibility: hidden;
   transform: rotate(30deg);
   width: 100px;
   height: 100px;
   background-color: pink;
}

新建模板文件src/index.html
```
<div class="box"></div>
```

在项目根目录下配置webpack的配置文件webpack.config.js

const path = require('path');


const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')




process.env.NODE_ENV = 'production';




module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, 'bulid')
},
module: {
rules: [{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
//固定写法
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
}, ]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/bulit.css'
}),
new OptimizeCssAssetsWebpackPlugin()
]
}

根目录下package.json文件，配置browserslist
使用时记得删除注释

"browserslist":{
    "development":[ //开发环境
        "last 1 chrome version", //兼容最新的谷歌浏览器
        "last 1 firefox version",//兼容最新的火狐浏览器
        "last 1 safari version"//兼容最新的苹果浏览器
    ],
    "production":[//生产环境
        ">0.2%",//兼容市场大部分浏览器
        "not dead", // 不兼容已经不使用的浏览器
        "not op_mini all" //不兼容op_mini浏览器
    ]
}

通过webpack.config.js修改nodejs的环境变量使postcss根据不同环境变量使用不同的配置
```
process.env.NODE_ENV = 'development';
```
进行打包
```
webpack
```

(三) css压缩

下载 optimize-css-assets-webpack-plugin

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

在上个例子的基础上修改webpack.config.js文件

...
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
...
module.exports = {
	...
	plugins: [
        ...
        new OptimizeCssAssetsWebpackPlugin()
    ]
}

进行打包
```
webpack
```

7.webpack将js从css抽离，css打包压缩

(一) 将css从js文件中抽离

(二) css兼容性处理

(三) css压缩