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'
     })
  }
  
}

公共样式复用

 const MiniCssRxtractPlugin = require('mini-css-extract-plugin')

const commonCssLoader = {
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
    // 需要在package.json中定义browsersslist
      loader:'postcss-loader',
      options:{
        ident:'postcss',
        plugins:() => {
           require('postcss-preset-env')()
        }
      }
    }
}
module.exports = {
  ...
  module:{
    rules:[
     {
        test:/\.css$/,
        use:[...commonCssLoader]
     },
     //  引入Sass可以更好的组织管理样式文件，更高效的开发
     {
      test:/\.less$/,
      use:[...commonCssLoader,'sass-loader']
     }
    ]
  },
  plugins:[
     new MiniCssExtractPlugin({
        filename:'css/built.css'
     })
  ]
}

css 压缩

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

module.exports ={
   ...
   plugins:[
      new OptimizeCssAssetsWebpackPlugin
   ]
}

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/,  // 不检查第三方库
             enforce:'pre',// 优先执行
             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',
                {
                 useBuiltIns:'usage',
                 corejs:{version:3},
                 targets:{
                   chrome:'60'
                 }
                }
                ]
           }
         }
       ]
    }
}


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

排除其他文件

module.exports ={
   ...
   rules:[
     {
       exclude:/\.(js|css|less|html|jpg|png|gif)/,
       loader:'file-loader',
       options:{
         outputPath:'media'
       }
     }
   ]
}