看完你的眼睛，你还是一个没有秋季招聘计划的人吗？ 时间很匆忙。 自6月8日易迅开始紧急招募关培生以来，也意味着秋招的开始。 但你还在等待春天的到来吗？ 去年的情况应该更加严峻。 随着各大技术（vue、webpack、react、陌陌小程序）的生态越来越成熟，也意味着我们要更加深入地了解它们、掌握它们。 例如，如果你写了一个vue项目webpack配置目录，你就知道vue-cli。 写的项目也是无与伦比，你会去了解一下vue-cli发生了什么吗？ 也许这就是笔试考官想问你的问题：请手写一份webpack4.0配置。
前言
机会总是留给有计划的人。 如果你想在这个动荡的求职季中脱颖而出，那就拿到你期待已久的offer吧。 这样，你就应该知道很多别人不知道的事情，这样你的翅膀才能丰满，才能在天空中飞翔。 老鹰冲上天空，不是天生的，而是年轻时遇到悬崖的危险。 笨鸟先飞，不是靠智慧，而是靠不懈的努力。
webpack的解读
webpack是一个打包工具，它的目的是打包所有静态资源。 有人会问为什么要webpack？ Webpack是现代后端技术的基石，传统的开发方式，如jquery、html、css等静态网页开发已经落后了。 现在是MVVM时代，数据驱动接口。 webpack 打包了现代 js 开发中各种新颖有用的技术。 webpack的描述已经很铺天盖地了，我就不浪费大家的时间了。 看懂这些图就可以了解webpack的生态系统：
webpack4.0的配置
1.前端环境搭建
我们使用npm或yarn来安装webpack。
webpack为什么要分成两个文件？ 在 webpack3 中，webpack 本身和它的 cli 曾经位于同一个包中，但在版本 4 中，他们将两者分开以便更好地管理它们。
新建一个webpack文件夹，在其下新建一个try-webpack（避免与init时的项目名和安装包同名）并初始化和配置webpack。
2.部署webpack
在构建的环境项目中，我们来到package.json来配置我们的脚本。
在配置我们的webpack运行环境时，可以考虑一下vue-cli。 通常使用vue-cli会为我们手动配置并生成项目。 我们在src下开发项目，最后npmrunbuild打包并生成我们的dist目录。 不知道大家还记不记得，下面我们就来体验一下整个过程吧。
3.npmrunbuild 发生了什么
在我们的根项目下的 try-webpack 下创建一个新的 src 目录。 在 src 目录中创建一个新的 index.js 文件。 我们可以在上面编写任意代码，主要有以下情况：
编写完成后，我们在终端运行我们的命令：npmrunbuild，你会发现多了一个新的dist目录，里面存放了webpack打包的main.js文件。 这和我们在 vue-cli 中做的一样。
四、webpackp配置流程
我们在开发时通常会打包src下的哪些文件？ 我们可以回忆一下，虽然vue-cli项目的src不仅仅是这几点：
所以我就分这几点来讲解一下webpack中webpack.config.js的配置，按照步骤，一步步完成我们的流程线。
✍️webpack中的Html配置
在项目try-webpack根目录下新建webpack.config.js文件，用commonJS模块化机制导出，并新建index.html。
配置好后webpack配置目录，在终端输入npmrundev后，webpack就会打包我们的html并手动导入我们的js。
Live-sever我们的dist目录，启动端口8080，我们可以看到我们的HelloWorld。 这是我们的页面的实时版本。
webpack 中的 CSS 配置
在我们的vue-cli中，我们可以使用css来编写我们的样式，或者使用中间stylus、less、sass等预编译器。 这里以less为例，看看webpack是如何将其打包成css的。
执行 npmrunbuild 后我们没有 css，为什么？ 原来是在webpack中配置cssinjs。 就是说我们的css在打包的时候是被打包到我们的js里面了，所以我们引入了extract-text-webpack-plugin插件来剥离其中的css。 但另一个问题，require的机制？
在我们的打包过程中，需要的文件引用是按照顺序打包的，这就是文件依赖的机制。
打包之后，我们去live-server，发现我们的样式上去了，css部分被分离出来了。
webpack中的js配置
如今，随着es6的流行，越来越多的代码使用es6，而很多浏览器并不支持es6，比如async/awiat、const。 所以我们需要引用babe来将我们的es6代码编译成es5。 在以下目录新建.babelrc，并进行简单配置：
你学会了吗？ 还没学会的记得私信小编“011”哦~
