webpack 配置进阶知识

提取css成单独文件

• 原因

不提取css文件，打包时会放在js文件中，不仅会增加js文件体积，使js文件下载时间延长，而且进行解析js文件往往都是在dom树生成之后，就增加了延迟，影响渲染速度，用户体验差

• 好处

将css文件单独提取出来，就可以先在页面的最前面引入这个单独的css文件，浏览器先解析css文件就会生成cssom从而与domtree生成渲染树，从而以最快速度渲染出页面。

安装：npm i mini-css-exreact-plugin -D

配置：

module.exports ={
  ...
  module:{
     rules:[
    {
    test:/\.css$/,
    use:[
       // style-loader //创建style标签到head上但是要分离css时候不适用
       MiniCssExtractPlugin.loader, //使用插件特有的loader提取js中的css成为单独的文件
       'css-loader'
    ]
    }
  ]
  }
  plugins:{
     new MiniCssExtractPlugin({
       // 对输出的css重命名
       template:'./src/built.css'
     })
  }
  
}

css兼容性处理

• 原因：

系统需要兼容多个浏览器，就会在css文件添加-webkit-等厂商前缀。由于webpack无法识别这些前缀，所以引入postcss-loader,这个可以自动帮我们添加厂商前缀的信息。

安装：npm install postcss-loader postcss-preset-env -D
module.exports = {
   ...
   module:{
      rules:[
         {
           test:/\.css$/,
           use:[
              MiniCssExtractPlugin.loader,
              'css-loader',
              
              {
              loader:'postcss-loader',
              options:{
                ident:'postcss',
                plugins:() =>[
                // postcss的插件，帮助postcss找到package.json中的browserslist里面的配置，通过配置加载指定的css兼容
                  require('postcss-preset-env')()
                ]
              }
              }
           ]
         }
      ]
   }
}


package.json中的配置
{
  "browserslist":{
  // 开发环境 ，需要设置nodejs环境变量
      "development":[
          "last 1 chrome version",//最近的chrome浏览器版本
      ],
      // 生产环境(默认的)
      "production":[
          ">0.2%",
          "not dead",
          "not op_mimi all"
      ]
      
  }
}

js语法检查eslint

安装：npm i eslint-config-airbnb-base eslint-plugin-import eslint -D
配置：
module.exports = {
   ...
   module:{
      rules:[
      /*
      js语法检查eslint
      */
         {
             test:/\.js$/,
             exclude:/node_modules/,  // 不检查第三方库
             loader:'eslint-loader',
             options:{
               // 自动修复eslint的错误
               fix:true
             }
         },
         /*
         js兼容性处理： babel-loader  @babel/core @babel-preset-env
         1：@babel-preset-env,只能处理部分兼容性问题
         2:全部的兼容性处理，需要下载@babel/polyfill
         3:按需加载，做兼容性处理---》core-js
         */
         {
           test:/\.js$/,
           exclude:/node_modules/,
           loader:'babel-loader',
           options:{
              // 预设：指示babel做怎么样的兼容处理
              presets:['@babel/preset-env']
           }
         }
       ]
    }
}


package.json中eslintConfig中配置
"eslintConfig":{
  "extends":"airbnb-base"
}