webpack打包css资源

一、CSS以style标插入的形式（js入口文件引入对应的css，less或sass,打包时会直接打包在js中，在页面渲染时作为style标签的innerHTML实现样式渲染）
（一）、一般用法
1、下载loader： css-loader和style-loader

    css-loader是处理css中的@import和url这样的外部资源
    style-loader是把样式插入到DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的innerHTML中

npm install css-loader style-loader -D

2、webpack.config.js配置

（二）、webpack打包less和sass
Less需要npm下载less和less-loader

npm i less less-loader -D

webpack.config.js配置(图中的test正则少了一个$)

Sass需要npm下载node-sass和sass-loader
使用方法同上，注意：sass文件的后缀名是scss

二、提取css为单独文件

使用mini-css-extract-plugin插件

1、下载

npm i mini-css-extract-plugin -D

2、引入-在webpack.config.js中引入插件

3、配置-在webpack.config.js的plugins里面new插件
(图中的test正则少了一个$)

4、当filename指定路径后 ps: 所有的css和less文件都被打包到了一个css中

三、处理css的浏览器兼容性
使用postcss处理，需要下载两个包--post-loader和postcss-preset-env
1、下载

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

2、配置

a、在package.json同级目录下创建postcss.config.js，里面配置如下代码

  b、在package.json文件中设置兼容的浏览器规则
  

  c、在webpack.config.js中配置loader
  

四、压缩CSS
使用optimize-css-assets-webpack-plugin
1、下载

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

2、引入:在webpack.config.js引入

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

3、配置