Webpack發佈策略

前言

前一篇文章 Webapck基礎搭建 咱們瞭解了一下 Webpack 的基本配置,已經可使用它簡單的搭建一個打包環境。可是，Webpack 的功能不只僅就這麼簡單，否則也不會成爲前端最流行的模塊化打包工具

那麼，它還有哪些咱們須要瞭解的功能呢，下面，咱們一點點去了解一下吧

若是文章中有出現紕漏、錯誤之處，還請看到的小夥伴多多指教，先行謝過

好了，廢話很少說，如下 ↓

準備工做

既然咱們要使用 Webpack 進行項目打包，那麼首先咱們確定須要有一個這樣的項目。

瞭解了 Webpack 的基本配置，咱們就能夠試着搭建一個簡單的 vue-cli 了，根據官網須要的 loader 還有一些簡單的插件，以及對 .babelrc 文件的修改，仍是比較容易的

這裏踩到的坑：

• babel-loader 升級到 8.x 版本以後可能須要簡單的配合，爲了便捷，因此 demo 中直接使用的7.x版本
• vue-loader 在升級到 5.x 以後 必須引入 vue-loader/lib/plugin 插件，不然會報錯

具體 DOME 請 點擊這裏，查看配置

分離第三方包

項目基本配置完成，接下來咱們先打包一次看看效果：

若是先前配置沒有問題，基本就是上圖的樣子

從打包好的文件中咱們能夠看到有 html 頁面，字體文件以及 bundle.js 文件( Webapck4 以後，會有默認分包策略，因此會出現好幾個 bundle.js 文件)

不難看出，其中 bundle.js 文件的體積仍是比較大的，如今，咱們首先將以前項目引入的第三方包分離出來

分離第三方包在 Webapck4.x 版本以前，咱們都是使用 CommonsChunkPlugin 去作分離，進入 webpack4.x 版本，這種方式被移除，至於二者之間有怎樣的區別，小夥伴們能夠在官網查看詳細信息

如今進行第三方包的分離工做：

在 webpack4.x 以前的時代，咱們須要指定須要分離的第三方包、指定出口、添加插件這三個步驟

如今咱們須要作的：

• 指定出口

output: {
    path: path.resolve(__dirname, './dist'),
    // 指定分離出來包的名稱
    filename: 'js/[name].js'
},

• 引入配置

optimization:{   
    splitChunks:{
        cacheGroups:{//緩存組，一個對象。它的做用在於，能夠對不一樣的文件作不一樣的處理
            commonjs:{
                name:'vender',        //輸出的名字（提出來的第三方庫）
                test: /\.js/,        //經過條件找到要提取的文件
                chunks:'initial'    //只對入口文件進行處理
            }
        }
    }
}

至於 optimization 這個對象的配置，小夥伴們能夠 點擊這裏 查看完整配置說明

至此，咱們在打包一次看看效果：

很明顯，已經成功分離出了第三方代碼

圖片字體的處理

如今，咱們已經成功分離出了 js 文件，再來看咱們打包出來的 dist 目錄。能夠看到，咱們所打包出來的文件中還有不少字體文件，圖片是看不到的

因爲咱們使用 url-loader 對圖片進行了處理，因此在默認狀況下，全部的圖片都會轉化爲 base64 的格式保存在咱們的 bundle.js 文件當中

url-loader 與 file-loader 所實現的功能基本是相同的，能夠說 url-loader 是 file-loader 的一個拓展，咱們能夠在 url-loader 的配置選項當中設置文件大小，從而使圖片按照大小轉換成 base64 的格式或者直接以路徑引用

因此，咱們能夠在 url-laoder 中添加一個這樣的限制

{ test: /\.(jpg|png|gif|jpeg|bmp)$/, use: [{
    loader: 'url-loader',
    options: {
        // 限制圖片大小 10240 表示10kb
        limit: 10240
        }
    }]
},

這樣設置以後，全部小於 10kb 的圖片仍是會以 base64 的格式添加，大於 10kb 的則會以路徑的形式引用

再來看咱們的 dist 文件夾裏面的內容，裏面的內容分佈不是很明顯。因此接下來，咱們將它們分類到不一樣的文件夾當中去

{ test: /\.(jpg|png|gif|jpeg|bmp)$/, use: [{
    loader: 'url-loader',
    options: {
        // 限制圖片大小 10240 表示10kb
        limit: 10240,
        name: 'images/img-[hash:5].[ext]'
    }
}]},
{ test: /\.(svg|eot|ttf|woff|woff2)$/, use: [{
    loader: 'file-loader',
    options: {
        name: 'font/[hash:7].[ext]'
    }
}]}

添加到文件夾中的方式都是同樣，仍是在 options 選項中添加 name 屬性，其中 ext 表示以文件以前的格式後綴命名

接下來，咱們從新打包一次：

是否是美觀了不少

分離樣式文件

在 Webpack4.x 以前，咱們都是使用 extract-text-webpack-plugin 這個插件來分離樣式文件

自從 webpack4 以後，官方推薦的分離插件就是 mini-css-extract-plugin

首先，咱們須要下載這個插件

npm install --save-dev mini-css-extract-plugin

在webpack的配置文件中是這樣的

// 第一步：引入插件，在plugins中使用

new MiniCssExtractPlugin({
    filename: 'css/[name].css', // 打包文件名稱
    ignoreOrder: false // 移除警告
})

// 第二步：修改style-loader 爲 MiniCssExtractPlugin.loader

{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(sass|scss)$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader'] },

這樣，咱們就已經成功分離出了樣式文件

按需加載

咱們都知道，利用 webpack 的模塊化功能，就能夠實現模塊的按需加載，那麼，咱們該怎麼在項目中作一些配置呢

webpack4.x 以上版本實現了默認分包策略，也就是說在默認狀況下，webpack 會智能區分咱們的模塊，實現按需加載的功能

默認分包策略具備如下規則：

• 新的 chunk 是否被共享或者是來自 node_modules 的模塊
• 新的 chunk 體積在壓縮以前是否大於 30kb
• 按需加載 chunk 的併發請求數量小於等於 5 個
• 頁面初始加載時的併發請求數量小於等於 3 個

因爲這樣的一些內置規則，也就是爲何咱們在前面的項目打包過程當中會出現 2.js、3.js 這樣的文件

拿咱們如今這個 Demo 來講，對於這樣的文件名稱，很明顯不是那麼友好。因此，咱們能夠自定義一下這些文件名稱，最簡單的方式：

在 router 定義文件中：

使用 webpackChunkName 關鍵字直接定義名稱就能夠了,這樣，當咱們從新打包就能夠看到定義的名稱已經顯示在 dist 文件夾當中了

其餘

如今咱們已經完成了 webapck 打包發佈的基本功能，但是咱們可能會發現這樣一個問題：就是咱們每次在打包以前都要手動刪除掉 dist 文件夾。很明顯，不友好

咱們可使用 clean-webpack-plugin 來刪除它

插件的使用方式也是很簡單：

• 下載 clean-webpack-plugin 插件
• 在配置文件中引入

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

這裏有一個小小的坑，插件版本的不一樣，在3.0 版本咱們須要這樣引入 這個插件

• 在插件中直接使用

new cleanWebpackPlugin()

這樣在咱們每次打包以前，它都會先去刪除 dist 文件，而後再打包，不再用咱們手動去操做它了

後記

到這裏，這篇文章也就基本結束了

完整 Demo，請 點擊這裏 查看

固然，關於 webpack 咱們須要深刻研究的還有不少不少，好比 mode 模式、resolve 解析、按需加載自定義模式、各類優化等等東西。webpack 裏面的配置很複雜，可是當咱們熟悉了裏面的各類配置，再來構建一個項目就很簡單了

我一直認爲，模仿也是一種頗有效的進步方式，有興趣的小夥伴能夠看一看 vue 或者 react 中的 webpack 配置，相信必定會對你有所啓發

想要了解更多前端內容，有興趣的小夥伴能夠 點擊這裏 歡迎關注 star

參考

Webpack 官網