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? 踢你的？”

“行，马上带上大姨夫嗷，拜拜！”