兼容性处理

  1. // 安装插件 postcss-loader postcss-preset-env
  3. // 设置node.js环境变量
  4. process.env.NODE_ENV = 'development'
  6. // 修改打包css资源中的loader的配置
  7. module:{
  8.         rules:[
  9.             {
  10.                 test:/\.css$/,
  11.                 use:[ 
  12.                     'css-loader',
  13.                     // 修改loader的配置
  14.                     {
  15.                         loader:'postcss-loader',
  16.                         options:{
  17.                             ident:'postcss',
  18.                             plugins:()=>{
  19.                                 // postcss的插件
  20.                                 require('postcss-preset-env')()
  21.                             }
  22.                         }
  23.                     }
  24.                 ]
  25.             },
  26.         ]
  27.     },

配置package.josn中browserslist

  1.  /*
  2.     css兼容性处理  postcss --> postcss-loader postcss-preset-env
  3.     帮postcss找到package.josn中browserslist里面的配置，通过配置加载指定的css兼容性样式
  5.       "browserslist":{
  6.           // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = 'development'
  7.           要激活development 必须设置node环境变量
  8.           "development":[
  9.           "last 1 chrome version",
  10.           "last 1 firefox version",
  11.           "last 1 safari version"
  12.           ],
  13.           //  生产环境：默认是看生产环境
  14.           "production":[
  15.           ">0.2%",
  16.           "not dead",
  17.           "not op_mimi all"
  18.           ]
  19.       }
  20.  */

css压缩

// 安装插件 optimize-css-assets-webpack-plugin

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

plugins:[
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],