第八节:Webpack样式优化和JS转化与检查

1. 对于CSS样式的优化

1.1 提取CSS样式

1.1.1 提取样式文件说明

1. 之前的打包是利用css-loader将样式文件处理为模块,打包到JS中
2. 在通过style-loader将样式代码从JS中抽离,并且在html文件中创建style标签,插入样式代码

这样处理缺点

1. 将所有的样式文件打包到js中,会增加JS代码的体积,JS体积过大,会导致加载数据变慢
2. 将样式从JS中抽离出来,在嵌入到style标签中,可能会发生闪屏的问题

因此:

我们需要将样式文件打包问单独的样式文件

1.1.2 配置插件提取样式

说明:

1. 既然是将样式抽离为单独的文件,那么也就不需要使用style-loader了
2. 使用mini-css-extract-plugin插件处理
3. 并且使用mini-css-extract-plugin插件自带的loader将样式从JS模块中抽离出来

代码:

const HtmlWebpackPlugin = require("html-webpack-plugin")
// 提取css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {resolve} = require("path")


module.exports = {
    entry:"./src/main.js",
    output: {
        filename:"bundle.js",
        path: resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    // 创建style标签,将样式从js中取出加入的style标签里
                    // "style-loader",

                    // 取代style-loader,将js中的样式单独生成文件
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            // 对提出的css进行重命名
            filename: "css/build.css"
        })
    ],
    mode:"development"
}

1.2. CSS的压缩

使用optimize-css-assetso-webpack-plugin插件将打包后的css文件进行压缩

1.2.1 下载并导入插件

下载插件

$ yarn add optimize-css-assets-webpack-plugin -D

导入插件

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

1.2.2 使用插件

webpack.config.js文件中

 plugins:[
    new OptimizeCssAssetsWebpackPlugin()
  ],

2. webpack处理JS语法转换

2.1. JS语法转化说明

说明:

1. 我们平时开发大多会选择使用ES6的语法进行开发
2. 但是有部分浏览器没发直接识别ES6的语法,如IE
3. 因此我们开发时使用ES6语法,但是代码上线需要转为浏览器能识别的ES5的语法
4. 故而我们需要在webpack进行配置,打包时自动进行语法转化

2.2 对于ES6语法进行转换

说明:

1. 使用babel-loader对于js文件中的ES6语法进行转换
2. 在项目中,我们引入的包中也有很多js文件,因为我们需要在配置时剔除node_modules文件的中js
3. 除了babel-loader,还需要引入babel的核心@babel/core
4. 配置预设presets,使用@babel/preset-env

webpack.config.js 文件的配置

module:{
    rules:[
      {
        // JS 兼容性处理  babel-loader @babel/core  @babel/preset-env
        
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options:{
          // @babel/preset-env是babel的转码器
          "presets":["@babel/preset-env"]
        }
      }
    ]
  },

问题:

1. @babel/preset-env只能转换基本的ES6语法
2. 更高级的诸如promise等语法是转换不了的

2.3 全部兼容的处理方案

说明:

1. 使用@babel/polyfill处理所有JS语法的转化
2. 使用方式是下载后在入口js中通过import导入

使用方式,在入口js中

// 使用@babel/polyfill
import "@babel/polyfill"

问题:

1. 在入口js中导入,webpack会将@babel/polyfill中所有的内容都进行打包
2. 因此就算我们用不到的转码方式也会被打包,造成打包后的js文件体积过大

2.4 按需加载

说明:

1. 不使用@babel/polyfill处理转码
2. 使用core-js处理加载
3. 在webpack.config.js文件中配置

在webpack.config.js 中配置

module:{
    rules:[
      {
        // JS 兼容性处理  babel-loader @babel/core @babel/preset-env
        
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options:{
          // @babel/preset-env是babel的转码器
          "presets":[
            [
              "@babel/preset-env",
              {
                // 配置按需加载
                useBuiltIns:"usage",
                // 指定core-js的版本
                corejs:{
                  version: 3
                },
                // 指定兼容做到哪些浏览器的版本
                targets: {
                  chrome: "60",
                  firefox: "60",
                  ie: "9"
                }
              }
            ]
          ]
        }
      }
    ]
  },

这样,同样可以做到转码,同时打包后的体积也没有使用@babel/polyfill那么大

2.5. 抽离为文件

抽离文件说明:

1. 所有的配置内容都放在webpack.config.js并不是太好
2. 因此我们可以把转码的配置抽离为单个的文件
3. 这样的好处在修改配置和后续维护上更加便利

抽离为.babelrc文件

{
    "presets":[
        [
            "@babel/preset-env",
            {
                // 配置按需加载
                "useBuiltIns":"usage",
                // 指定core-js的版本
                "corejs":{
                    "version": 3
                },
                // 指定兼容做到哪些浏览器的版本
                "targets": {
                    "chrome": "60",
                    "firefox": "60",
                    "ie": "9"
                }
            }
        ]
    ]
}

3. js代码检查

3.1 代码检查说明

语法检查说明:

1. 使用eslint-loader 检查js文件,但是要排除node_modules文件中的js
2. eslint-loader依赖于eslint 所以下载包时两个都要下载
3. 使用eslint时,还需要决定使用哪种代码检测 使用eslint-config-airbnb-base
4. 因为eslint-config-airbnb-base又依赖于eslint和eslint-plugin-import

3.2 配置

在webpack.config.js中配置使用eslint

module:{
    rules:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          // 自动修复eslint错误
          fix:true
        }
      }
    ]
  },

在package.json中配置eslint使用的规则

{
    "eslintConfig":{
        "extends": "airbnb-base"
    }
}

也可以将eslint配置抽离为单独的文件

.eslintrc文件

{
  "root": true, 

  "extends": "airbnb-base"

}