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

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? 踢你的？」 「行，立刻帶上大姨夫嗷，拜拜！」