webpack系列：webpack小老弟接了個簡單活

bigname22發表於2020-12-05
Web

webpack深入淺出系列：進階篇

前沿，本篇文章的講解思路是以webpack的五大核心為線索，以webpack物件為第一視角來講述（以前記得看過一個文筆非常厲害的技術啊婆寫的，非常有趣。然後我就想著模仿一下）。

該篇目的是為了掌握webpack的打包運作流程

  • 認識webpack.config.js
  • 認識plugins - HtmlWebpackPlugin
  • 認識entry

正文開始

大家好，我是webpack
 大家好，我是一個專門做打包的打工仔，我的英文名叫webpack。今天npm老大哥找我幫忙，打包下他剛建立的webpack-test專案。本來今天挺忙的，但既然npm老大哥叫我來就還是來了，畢竟很多生意都是老大哥給我介紹的。唉，打工人沒有尊嚴。?
 我進來webpack-test這個專案看了一下程式碼結構，長舒一口氣：”幸好，今天活不多，早點幹完早點收工！奧利給“。

webpack-test專案：
在這裡插入圖片描述

打工人開始幹活
 專案進入工作狀態了，但大多數時候我都在後面默默無聞的呆著。直到我被喊：webpack；這個時候我就是到該我上場了。當然，大多數正規工程都是讓老大哥npm喊我，例如：npm run build / npm run dev。因為老大哥的package.json的清單裡面記著我很多暗號。
 首先，在我幹活之前：我檢查了一遍專案中有沒有webpack.config.js的配置清單，怎麼施工得按照圖紙來嘛，萬一貨不對版，客戶有意見那就大事件了。當然，如果專案中沒有配置清單的話，我自己也有一份預設的，這是我的經驗所得，也能保證專案正常打包。 
// webpack.config.js
const path = require('path');
module.exports = {
    // ------  entry  --------
    entry: {
        main: './src/index.js',
        second: './src/second.js'
    },
    // ------- output ------
    output: {
        path: path.resolve(__dirname, 'dist')
    },
};

在拿到我的施工圖紙：webpack.config.js圖紙之後，我先看了一下entry這個設計：

    entry: {
        main: './src/index.js',
        second: './src/second.js'
    },

“嗯嗯，我懂了，這個webpack-test工程是想我從兩個入口開始，打包出來兩個東西【main】【second】”。

那問題不大，於是我就先從第一個入口開始“./src/index.js”，就順著這個關係發現：

[index.js 程式碼]

import { showDate } from './utils/date.js';
showDate()
!function(window){
    let name = 'bigname';
    function showName() {
        console.log(name);
    };
    window.index = {
        showName
    }
}(window)

 原來，index.js裡面引用了“./utils/date.js”，差點大意了。那我就順藤摸瓜：找到了這次打包的原材料了：【index.js、date.js】然後經過我的一系列操作後【當然這個還得細細道來】，最終結果：把專案中的【index.js、date.js】打包成一個檔案【main.js】

同理：第二條線也一樣。

 這個時候我想吐槽一下：“客戶只會在entry告訴我，你先從誰開始吧。就這麼一句話我就得找到那個誰，然後再找到這個誰還跟其他的誰有什麼關係...得一個一個問清楚了我才能正常工作，唉！所以你別看webpack.config.js施工圖很簡單，那是因為我背後做了很多東西你們看不到。”

專案管理人有意見了

那事情總算是做完了，這個時候專案負責人【正在學習webpack的開發者】就問我了：

“咦，我看別人打包完了是有index.html的喔，你是不是偷工減料啊？”

“大哥，我是按照你給的圖紙做事的喔。你沒有要求要這個我就沒給你加囖！”

“你什麼態度，我現在就要，你說怎麼弄？”

“唉，這雖然這本身不是我webpack會的事，但你可以在我們webpack屆plugins裡面找那個叫HtmlWebpackPlugin的，相傳他就是那個幫你自動建立index.html的男人，他雖然是男人但他有點不太行，一個他只能生成一個html。你想要多個那就建立多個。算了我還是給你看些別人召喚他的寫法吧”

    plugins: [
        new HtmlWebpackPlugin({
            　　　　filename: 'index.html',
            　　　　chunks: ['vendors', 'main']
            　　}),
        new HtmlWebpackPlugin({
            　　　　filename: 'second.html',
            　　　　chunks: ['vendors', 'second']
            　　}),
    ]

PS：這種寫法打包的結果就是
【index.html中引入main.js】
【second.html中引入second.js】

如果你想：一個html同時引入main.js+second.js，你可以這麼寫：

   plugins: [
        new HtmlWebpackPlugin(),
    ]

“行吧，看你態度不錯，下次還找你！”

“好啊，好啊。老大哥npm介紹的朋友都很歡迎。”

表面上我唯唯諾諾，暗地裡我重拳出擊：你不找我還能找誰。老子天下第一啊。於是這單生意我又完成了。

話音剛落~npm老大哥又來電話了【有大工程】。

“喂，老大哥，對方啥陣形啊？”
“4-4-2? 踢你的？”
“行，馬上帶上大姨夫嗷，拜拜！”

相關文章