1. 對(duì)于CSS樣式的優(yōu)化

1.1 提取CSS樣式

1.1.1 提取樣式文件說(shuō)明

1. 之前的打包是利用css-loader將樣式文件處理為模塊,打包到JS中
2. 在通過(guò)style-loader將樣式代碼從JS中抽離,并且在html文件中創(chuàng)建style標(biāo)簽,插入樣式代碼

這樣處理缺點(diǎn)

1. 將所有的樣式文件打包到j(luò)s中,會(huì)增加JS代碼的體積,JS體積過(guò)大,會(huì)導(dǎo)致加載數(shù)據(jù)變慢
2. 將樣式從JS中抽離出來(lái),在嵌入到style標(biāo)簽中,可能會(huì)發(fā)生閃屏的問(wèn)題

因此:

我們需要將樣式文件打包問(wèn)單獨(dú)的樣式文件

1.1.2 配置插件提取樣式

說(shuō)明:

1. 既然是將樣式抽離為單獨(dú)的文件,那么也就不需要使用style-loader了
2. 使用mini-css-extract-plugin插件處理
3. 并且使用mini-css-extract-plugin插件自帶的loader將樣式從JS模塊中抽離出來(lái)

代碼:

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:[
                    // 創(chuàng)建style標(biāo)簽,將樣式從js中取出加入的style標(biāo)簽里
                    // "style-loader",

                    // 取代style-loader,將js中的樣式單獨(dú)生成文件
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            // 對(duì)提出的css進(jìn)行重命名
            filename: "css/build.css"
        })
    ],
    mode:"development"
}

1.2. CSS的壓縮

使用optimize-css-assetso-webpack-plugin插件將打包后的css文件進(jìn)行壓縮

1.2.1 下載并導(dǎo)入插件

下載插件

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

導(dǎo)入插件

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

1.2.2 使用插件

webpack.config.js文件中

 plugins:[
    new OptimizeCssAssetsWebpackPlugin()
  ],

2. webpack處理JS語(yǔ)法轉(zhuǎn)換

2.1. JS語(yǔ)法轉(zhuǎn)化說(shuō)明

說(shuō)明:

1. 我們平時(shí)開(kāi)發(fā)大多會(huì)選擇使用ES6的語(yǔ)法進(jìn)行開(kāi)發(fā)
2. 但是有部分瀏覽器沒(méi)發(fā)直接識(shí)別ES6的語(yǔ)法,如IE
3. 因此我們開(kāi)發(fā)時(shí)使用ES6語(yǔ)法,但是代碼上線需要轉(zhuǎn)為瀏覽器能識(shí)別的ES5的語(yǔ)法
4. 故而我們需要在webpack進(jìn)行配置,打包時(shí)自動(dòng)進(jìn)行語(yǔ)法轉(zhuǎn)化

2.2 對(duì)于ES6語(yǔ)法進(jìn)行轉(zhuǎn)換

說(shuō)明:

1. 使用babel-loader對(duì)于js文件中的ES6語(yǔ)法進(jìn)行轉(zhuǎn)換
2. 在項(xiàng)目中,我們引入的包中也有很多js文件,因?yàn)槲覀冃枰谂渲脮r(shí)剔除node_modules文件的中js
3. 除了babel-loader,還需要引入babel的核心@babel/core
4. 配置預(yù)設(shè)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的轉(zhuǎn)碼器
          "presets":["@babel/preset-env"]
        }
      }
    ]
  },

問(wèn)題:

1. @babel/preset-env只能轉(zhuǎn)換基本的ES6語(yǔ)法
2. 更高級(jí)的諸如promise等語(yǔ)法是轉(zhuǎn)換不了的

2.3 全部兼容的處理方案

說(shuō)明:

1. 使用@babel/polyfill處理所有JS語(yǔ)法的轉(zhuǎn)化
2. 使用方式是下載后在入口js中通過(guò)import導(dǎo)入

使用方式,在入口js中

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

問(wèn)題:

1. 在入口js中導(dǎo)入,webpack會(huì)將@babel/polyfill中所有的內(nèi)容都進(jìn)行打包
2. 因此就算我們用不到的轉(zhuǎn)碼方式也會(huì)被打包,造成打包后的js文件體積過(guò)大

2.4 按需加載

說(shuō)明:

1. 不使用@babel/polyfill處理轉(zhuǎn)碼
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的轉(zhuǎn)碼器
          "presets":[
            [
              "@babel/preset-env",
              {
                // 配置按需加載
                useBuiltIns:"usage",
                // 指定core-js的版本
                corejs:{
                  version: 3
                },
                // 指定兼容做到哪些瀏覽器的版本
                targets: {
                  chrome: "60",
                  firefox: "60",
                  ie: "9"
                }
              }
            ]
          ]
        }
      }
    ]
  },

這樣,同樣可以做到轉(zhuǎn)碼,同時(shí)打包后的體積也沒(méi)有使用@babel/polyfill那么大

2.5. 抽離為文件

抽離文件說(shuō)明:

1. 所有的配置內(nèi)容都放在webpack.config.js并不是太好
2. 因此我們可以把轉(zhuǎn)碼的配置抽離為單個(gè)的文件
3. 這樣的好處在修改配置和后續(xù)維護(hù)上更加便利

抽離為.babelrc文件

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

3. js代碼檢查

3.1 代碼檢查說(shuō)明

語(yǔ)法檢查說(shuō)明:

1. 使用eslint-loader 檢查js文件,但是要排除node_modules文件中的js
2. eslint-loader依賴于eslint 所以下載包時(shí)兩個(gè)都要下載
3. 使用eslint時(shí),還需要決定使用哪種代碼檢測(cè) 使用eslint-config-airbnb-base
4. 因?yàn)?code>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: {
          // 自動(dòng)修復(fù)eslint錯(cuò)誤
          fix:true
        }
      }
    ]
  },

在package.json中配置eslint使用的規(guī)則

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

也可以將eslint配置抽離為單獨(dú)的文件

.eslintrc文件

{
  "root": true, 

  "extends": "airbnb-base"

}