（三）webpack打包其他资源以及优化

1.处理css的兼容性

css的一些属性不是所有浏览器都兼容的，通常需要手动配置，不容易维护，而webpack打包的时候可以做到通过设置css属性需要支持的浏览器，打包时会自动编译成各个浏览器支持的属性。

1. 需要使用postcss处理，下载两个包：npm i postcss-loader postcss-preset-env -D
2. 写入对应处理的规则（postcss-loader）

   { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] },

3. postcss需要新建一个配置文件“postcss.config.js”，引入插件：

   module.exports={
       plugins:[
           require('postcss-preset-env')()  
       //加载这个插件的时候会自动找到package.json里设置的浏览器列表
       ]
   }

4. 在package.json中设置浏览器规则列表：

   {
       //其他内容
   
       "browserslist":[  
       "> 0.2%",  //80%以上的浏览器
       "last 2 versions",  //浏览器最近的两个版本
       "not dead"  //已过期废弃的浏览器不再使用
     ]   //这里有"browserslist":{}和"browserslist":[]两种写法，前者可以指定开发时和运行时各用哪种规则，而后者默认是运行时的规则
   }

5. less和sass也是同样的处理方法，配置完成后执行，符合规则的属性不变，不符合规则的会自动写进兼容的属性
   

 2. 压缩CSS

下载插件：npm i optimize-css-assets-webpack-plugin -D（压缩css是直接用插件处理，不用loader）

1. 引入插件

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

2. 使用插件

   plugins: [
       //.....
      
       new OptimizeCssAssetsWebpackPlugin(),  
       //一般项目上线的时候再进行css压缩，开发时使用原始的css方便处理
     ],

3. webpack打包图片资源

图片有两种引入方式：css引入和html引入

 在css中引入图片

下载url-loader和file-loader两个包

1. 引入图片
   
2. 配置loader

   // { test: /\.(png|jpg|jpeg|gif)$/, use: ['url-loader',{loader:'file-loader',options:{}}] }   //use有多个loader时
         { 
           test: /\.(png|jpg|jpeg|gif)$/, 
           loade