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