likes
comments
collection
share

webpack初相识

作者站长头像
站长
· 阅读数 40

前言

看标题，就知道此文是分享给想要搞前端工程化的新人，我看过很多webpack的视频，刷过webpack的文章，但是大多要么是在对着ppt念文档，要么是直接给你说各种api怎么用，然而对于一个新人，想要了解webpack，并不是这些碎片化的知识，而是你要以和他交朋友的方式，去认识他，虽然webpack会作为面试官常问起的一个方面，我还是希望你不要面向面试去学习一项技能，而是能去了解他的前世今生，我不是在这里去强调你要去掌握他的每一个细节，而是希望所有想要学习webpack的有一个正确的学习方法，也是此文的意义所在。

交个朋友吧

既然刚刚提到了以交朋友的方式去认识webpack，我以为什么，是什么，怎么用的方式，带各位一起了解他。

为什么有webpack

一项技术的由来，肯定不是空穴来风，而是需求带来的技术革命，那么在前端开发中，存在着一个什么需求呢？就是模块化开发项目，你或多或少了解过es6的import export或者node中的require module.exports这些模块化的知识，因为本文主要是讲解webpack相关，模块化的知识这里不展开，那么在开发过程中呢，我们的项目往往会依赖各种各样的包，因为我们前端的项目是要运行在浏览器中，浏览器在访问页面的时候会拉取相关的依赖，那么会造成一个什么问题呢，我们通过代码的方式来进行说明： 项目结构(这里为了方便演示)： ├─ a.js ├─ b.js ├─ index.html └─ index.js

// index.js
import a from './a.js'
console.log('index')

// a.js
import b from './b.js'
console.log('a')
export default 'a'

// b.js
console.log('b')
export default 'b'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js" type="module"></script>
</body>
</html>

很简单的代码对吧，vscode里安装如下插件，右键index.html右键Open with Live Server，在浏览器访问页面。

webpack初相识 打开控制台，成功打印：

webpack初相识

当我们切到网络一栏，选到js，可以看到，加载了3个js文件，在实际的项目中，如果这么写，会造成资源的浪费，我们希望我们在runtime（生产环境中）时，只请求一个js文件，那么webpack就来帮你啦！(当然，webpack不仅仅只解决这一个问题) webpack初相识

webpack是什么

webpack初相识 上图截自webpack官网，红色字体left、mid、right是为了方便说明自行添加上去的。left部分是我们devtime中用到的各种模块，mid部分就是webpack，right部分呢就是runtime生产环境中运行的代码，也就是说，webpack把我们在开发环节用到的各个模块（左侧）进行分析（在node环境下），最终打包生成右侧的生产环境的代码，这达成一个什么效果呢？就是我们可以专心的编写我们的业务功能部分的代码，webpack最终统一帮我们打包成浏览器喜欢的代码，你好她也好双赢的局面。

怎么用webpack

既然我们遇到了问题，并且也知道了webpack的作用，那么，你肯定迫不及待的想要重构一下我们的项目了，我没用过webpack啊，让我们去baidu搜搜如何使用吧，no no no！你一定要改掉这个习惯，你一定是要打开官网，为什么要去官网看文档，因为那是标准答案，既然有了最佳实践，你为什么要去搜索那些不准确可能错误的步骤来浪费你的时间呢？搜索一定是你遇到了问题不知道如何解决时再去搜索。 ok来到官方文档，我们看到下图，我们按照步骤操作吧

webpack初相识 现在项目的目录结构调整为：

webpack初相识 很多同学肯定着急了，你index.html去哪了，先别急，我们来到package.json，新增两行脚本，如下图红框：

webpack初相识 我们来到终端，npm run dev运行一下，你会发现生成一个dist目录，目录里main.js就是webpack给你打包后的代码，ok，此时我们把index.html放到dist目录下并把main.js引入，此时项目结构为：

webpack初相识 我们再去浏览器运行index.html看看：

webpack初相识 成功打印，让我们切到网络，妙啊~！此时只需要请求一个js，当然了，npm run dev这里是为了开发中方便调试运行的命令，实际在生产环境中是要去运行npm run build进行打包的，这里留给各位同学自己操作来看看运行在生产环境中的代码有什么不同吧！

webpack初相识 文章到此告一段落，很少会有人去耐心的一点点的告诉你一个东西怎么来，是什么，怎么用，希望各位掌握一门技术的时候都要多问几个为什么，解决了什么问题，到底是个什么，如何去应用他，你便可以在工作学习中不断地去锦上添花，而不是碎片化的知识一盘散沙。

尾声

很多人会问，前端这更新速度日新月异，该怎么去掌握这么多东西啊，学是学不完的，无论哪一门语言，哪一门技术，都是学不完的，恰巧昨天刷雷布斯的年度演讲，说的一句话很中肯也是本人所坚持的理念，保持终身学习，我再加一句，终身分享。知识从1到100往往是简单的，很多人却被拦在了从0到1的那个过程，我希望通过我所知所学，能成为你前进路上的引路人之一。

转载自:https://juejin.cn/post/7268887825638588451
评论
请登录