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

  • A+
所属分类:安全开发

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

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

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

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

为什么要使用 webpack

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

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

在 Web 端其实也有大量的第三方库。比如我们大名鼎鼎的 jQueryLoadshBootstrap 等等。在 Web 开发初期,当我们需要使用这些第三方库时,我们会使用 <script> 标签完成,但是这种方式带来的问题是每个文件中声明的变量都会出现在全局作用域内,即 Window 对象中。模块间的依赖关系完全由文件的加载顺序所决定,显然这种模块组织方式存在很多弊端,于是就出现了所谓的 “前端模块化标准规范”。

前端模块化标准规范中的几个代表分别为:

  • AMD:RequireJS 在推广的过程中对异步模块定义的规范化产出。

  • CMD:SeaJS 在推广的过程中对同步模块定义的规范化产出。

  • CommonJS: CommonJS 规范 - 利用 require 导入, exports 对象或者 module.exports 导出 (浏览器并不支持,但在 node.js 后端会使用)。

  • ES6 模块:通过 export 命令显式指定输出的代码,再通过 import 命令输入。

可以看到,前端有很多种模块化表现形式,但是它们之间是不能够相互依赖的,比如我在项目中需要使用 abc 以下三个库:

  • a: AMD 规范。

  • b: CMD 规范。

  • c: CommonJS 规范。

最后需要打包成为 ES6 模块规范输出,这个时候就尴尬了。

所以我们急需一个打包工具,包含以下功能:

  • 兼容多种模块系统风格。

  • 模块按需加载且不影响页面初始化速度。

  • 文件打包。

每个页面会根据前端资源 JSCSS、图片等发起多次 HTTP 请求,大量页面叠加在一起,将极大地降低页面的性能,造成页面加载很慢。那么,能不能将前端资源文件合并为一个文件呢?

  • 支持文件压缩

比如说代码中有一些注释、空格、无用的代码等等,打包合并过后的文件可否做到压缩呢?

  • 编译和转换

比如需要用到 TypeScriptFlowSassLessVueJSX 等等,当这些浏览器不能够直接识别语法语言的时候,是否可以做编译和转换呢?

ok!这个时候我们的重量级选手 webpack 就登场了。

什么是 webpack

先上一张 官网 的图:

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

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器( modulebundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图( dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

说了那么多概念性的东西想必都疲惫了,下面我们先来一个 Demo 简单用一下 webpack。

(下面动手操作的内容,可以来实验楼免费使用配套的实验环境,边敲代码边学习~)

课程地址:

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

webpack 基础用法

我们先来感受一下 webpack。

创建工程

首先创建一个目录叫 sy_webpack-basicusage,在命令栏执行以下命令:

  1. mkdir sy_webpack-basicusage

然后进入到 sy_webpack-basicusage 目录并执行 npm init 命令来初始化一个工程:

  1. cd sy_webpack-basicusage && npm init

直接一路回车,最后会提示你 “是否完成初始化操作?”,直接输入 yes 就 ok 了,初始化后会看到工程目录多了一个 package.json 文件:

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

创建入口文件

我们在 sy_webpack-basicusage 目录下创建一个 src 目录:

  1. mkdir src

然后在 src 目录中创建一个 index.js 文件作为 webpack 的入口文件:

  1. touch src/index.js

我们写一点代码到 src/index.js 文件:

  1. import $ from 'jquery'; // 引入 jquery 第三方库

  2. $('#app').text('hello webpack!'); // 使用 jquery 输出

代码很简单,就导入了一个 jquery 库,然后利用 jquery 输出 hello webpack! 文本到页面 id 为 app 的元素中。

安装 jquery

sy_webpack-basicusage 目录下执行以下命令:

  1. npm install jquery --registry https://registry.npm.taobao.org

安装 webpack

sy_webpack-basicusage 目录下执行以下命令:

  1. npm install -D [email protected].44.1 webpack-cli --registry https://registry.npm.taobao.org

由于我们后面的源码解析是针对 4.44.1 版本,所以我们直接指定了 webpack 的版本号。

编译打包

sy_webpack-basicusage 目录下执行以下命令:

  1. npx webpack

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

可以看到,当执行完 npx webpack 命令后,在工程目录中多出了一个 dist/main.js 文件。小伙伴现在看不懂里面代码具体是什么意思,不用担心,后面我们源码分析的时候会细讲。

创建浏览器入口

sy_webpack-basicusage 目录下创建一个 index.html 文件:

  1. touch index.html

然后写入点内容到 index.html 文件:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>webpack基础用法</title>

  6. </head>

  7. <body>

  8. <!-- 创建挂载点 -->

  9. <div id="app"></div>

  10. <!-- 引入入口js文件 -->

  11. <script src="./dist/main.js"></script>

  12. </body>

  13. </html>

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

测试

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

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

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

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

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

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

课程地址:

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

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

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

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

👇👇👇 点击阅读原文,了解课程详细信息~

本文始发于微信公众号(实验楼):如何用 webpack 从零搭建一个企业级项目

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: