初識 webpack (三)

ouer1994發表於2020-01-03
Web

webpack 4

1. 自動清空構建目錄

# webpack.config.js 中
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

# webpack.config.js [plugins 中]
new  CleanWebpackPlugin(),

2. 補齊 css3 字首

browlist: https://browserl.ist/

Github: https://github.com/browserslist/browsersli...

npm i -D postcss-loader autoprefixer

# webpack.config.js [module.rules 中]
{
    test: /\.less/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')({
                        browsers: ['last 2 version', '>1%']
                    }),
                ]
            }
        },
        'less-loader',
    ]
},

3. px 轉換為 rem

npm i -D px2rem-loader

# css
.search-text {
  font-size: 20px;
  color: red;
  display: flex;
  border-radius: 4px; /*no*/ 
}

/*no*/  表示不進行轉換

# webpack.config.js [module.rules 中]
{
    test: /\.less/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')(),
                ]
            }
        },
        {
            loader: 'px2rem-loader',
            options: {
                // 1rem = 75px
                remUnit: 75,
                // 精度
                remPrecision: 8
            }
        },
        'less-loader'
    ]
},

4. 靜態資源內聯

程式碼層⾯

  • ⻚⾯框架的初始化指令碼
  • 上報相關打點
  • css 內聯避免⻚⾯閃動

請求層⾯：減少 HTTP ⽹絡請

  • ⼩圖⽚或者字型內聯 (url-loader)
npm i -D raw-loader@0.5.1

# 手淘的 自動計算 font-size 指令碼
 npm i lib-flexible

4.1 HTML, JS 內聯

使用 raw-loader

...
<head>
${ require('raw-loader!./meta.html') }
<title>Document</title>
<script>${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js') }</script>
</head>
...

4.2 css 內聯

  1. style-loader

初識 webpack (三)

  1. html-inline-css-webpack-plugin

5. sourcemap

sourcemap 關鍵字 說明
eval 使⽤ eval 包裹模組程式碼
source map 產⽣ .map ⽂件
cheap 不包含列資訊
inline 將 .map 作為 DataURI 嵌⼊，不產⽣ .map ⽂件
module 包含 loader 的 sourcemap 
# webpack.config.js 中
devtool: 'source-map'

6. 提取公共庫

6.1 使用 html-webpack-externals-plugin 外掛提取

將公共庫(比如 jquery) 從 bundle.js 中提取出來.

文件: https://www.npmjs.com/package/html-webpack...

npm i -D html-webpack-externals-plugin

# webpack.config.js 中
const  HtmlWebpackExternalsPlugin  =  require('html-webpack-externals-plugin');

# webpack.config.js [plugins 中, **放在 HtmlWebpackPlugin 例項之後**]
new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: 'jquery',
            entry: 'dist/jquery.min.js',
            global: 'jQuery',
        },
    ],
}),

6.2 使用 SplitChunksPlugin(webpack 4內建) 外掛提取

# webpack.config.js 中
optimization: {
    splitChunks: {
        cacheGroups: {
            jqueryA: {
                chunks: "all",
                test: /jquery/,
                name: "jquery",
            },
        }
    }
},

# 引入到 html 檔案中, 需要在 html-webpack-plugin 的例項配置 chunks 中加上 jquery

chunks: 
    async 非同步引⼊的庫進⾏分離(預設)
    initial 同步引⼊的庫進⾏分離
    all 所有引⼊的庫進⾏分離(推薦)

6.3 提取公共資源

# webpack.config.js 中
optimization: {
    splitChunks: {
        cacheGroups: {
            ...
            commons: {
                chunks: "all",
                name: "commons",
                minChunks: 2,
                minSize: 0
            }
        }
    }
},

minChunks: 最少引用次數, >= 這個次數才會提取出來
minSize: 提取出來的檔案的最小size. 如果小於設定的值是不會提取的

7. Tree Shaking (webpack4 mode: production的情況下, 預設開啟)

通俗的解釋: 用到的方法打包, 用不到的方法不打包(去掉)
那麼這個 用到的 又如何理解呢?

  • 程式碼不會被執行, 不可到達
  • 程式碼的執行結果不會被用到
  • 程式碼只會影響死變數(只寫不讀)

如果程式碼有副作用, Tree Shaking 會失效.

副作用這個概念來源於函數語言程式設計(FP)，純函式是沒有副作用的，也不依賴外界環境或者改變外界環境。純函式的概念是：接受相同的輸入，任何情況下輸出都是一樣的。
非純函式存在副作用，副作用就是：相同的輸入，輸出不一定相同。或者這個函式會影響到外部變數、外部環境。
函式如果呼叫了全域性物件或者改變函式外部變數，則說明這個函式有副作用.

必須是 es6 語法, commonJs 不支援

8. Scope Hoisting (webpack4 mode: production的情況下, 預設開啟)

原理: 將所有模組的程式碼按照引用順序放在一個函式作用域裡, 適當的重新命名一些變數以防止命名衝突.

簡單的理解就是: 減少了閉包數量, 從而減少了記憶體消耗. 但是對於引用次數 >1 的模組是無法進行此項優化的.

9. 動態 import

import('').then();

10. eslint

eslint-config-alloy: https://github.com/AlloyTeam/eslint-config...
eslint-config-airbnb: https://github.com/airbnb/javascript/tree/...

11. 優化構建時日誌顯示

# 初識 webpack (三)

# webpack.config.js 中
stats: 'minimal'

# 更有好的顯示構建結果
npm i -D friendly-errors-webpack-plugin

# webpack.config.js 中
const  FriendlyErrorsWebpackPlugin  =  require('friendly-errors-webpack-plugin');

# webpack.config.js [plugins 中]
new  FriendlyErrorsWebpackPlugin()
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章