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的配置清单，怎么施工得按照图纸来嘛，万一货不对版，客户有意见那就大事件了。当然，如果项目中没有配置清单的话，我自己也有一份默认的，这是我的经验所得，也能保证项目正常打包。
代码语言：javascript复制// 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这个设计：
代码语言：javascript复制 entry: {
main: './src/index.js',
second: './src/second.js'
},“嗯嗯，我懂了，这个webpack-test工程是想我从两个入口开始，打包出来两个东西【main】【second】”。
那问题不大，于是我就先从第一个入口开始“./src/index.js”，就顺着这个关系发现：
[index.js 代码]
代码语言：javascript复制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。你想要多个那就创建多个。算了我还是给你看些别人召唤他的写法吧”
代码语言：javascript复制 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，你可以这么写：
代码语言：javascript复制 plugins: [
new HtmlWebpackPlugin(),
]“行吧，看你态度不错，下次还找你！”
“好啊，好啊。老大哥npm介绍的朋友都很欢迎。”
表面上我唯唯诺诺，暗地里我重拳出击：你不找我还能找谁。老子天下第一啊。于是这单生意我又完成了。
话音刚落~npm老大哥又来电话了【有大工程】。
“喂，老大哥，对方啥阵形啊？” “4-4-2? 踢你的？” “行，马上带上大姨夫嗷，拜拜！”
