如何用 webpack 从零搭建一个企业级项目

Webpack 是现代前端中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。一些公司甚至会设置一个叫 webpack 工程师的角色，可见 webpack 在前端开发中的重要作用。

对于每一个前端工程师来说，如果你想拿到高薪，Webpack 就是绕不过去的一环。不论你用的是 Vue 、React 还是其他框架，掌握它都会对工作有很大帮助。Webpack 基本上包办了本地开发、编译压缩、性能优化的所有工作，实属神器。

今天我们就来一起学习下 Webpack 这一神器～并结合 Demo 从源码的角度分析 webpack 的工作原理。

为什么要使用 webpack

如果接触过一些其它开发语言，比如：Java、 C，若我们需要在代码中使用其它包模块的时候，我们首先需要做的就是导入这个包模块，最后由包构建工具去完成编译打包过程。

再比如：Android、 IOS，如果需要引用某些第三方包依赖或者组件的时候，我们首先需要做的也是导入这个包模块，最后由各自平台的包构建工具去完成编译打包。

在 Web 端其实也有大量的第三方库。比如我们大名鼎鼎的 jQuery、 Loadsh、 Bootstrap 等等。在 Web 开发初期，当我们需要使用这些第三方库时，我们会使用

可以看到，我们在 index.html 中引入了刚打包编译后的 main.js 文件。

测试

直接点击编辑器右上角的按钮浏览 index.html 文件：

可以看到，一个简单的前端工程通过 webpack 编译打包后轻松地就跑起来了！

接下来我们就来分析一下 webpack 是如何一步步把我们的入口 src/index.js 代码编译成为浏览器能够识别的 dist/main.js 代码了。

篇幅有限，以上内容来自实验楼课程《来和 webpack 谈场恋爱吧》，欢迎大家来实验楼边敲代码边学习。

课程地址：

https://www.lanqiao.cn/courses/2893

课程包含：webpack 的基本用法、webpack 源码分析、webpack 分包优化、webpack 服务、webpack 实战。从基础使用到深入源码分析，最后实战一个企业级的项目，助你轻松搞定平时的项目开发和面试。

课程每个实验都会有 Demo 实践，让你不会觉得枯燥乏味。实战项目也是使用了当前前端比较流行的前端框架 Vue，和一直很火的 TypeScript 语法，用的所有插件、第三方依赖等项目工具，都是企业级项目中所使用的，带给你的都是最前沿的前端技术，进阶高级前端开发。

???????????? 点击阅读原文，了解课程详细信息～