logo头像

小玉的技术博客

webpack4入门教程

Webpack 是什么

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

模块化,让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
Scss,less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
Grunt和Gulp的工作流程

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

Webpack工作方式

Webpack工作方式
如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

开始使用Webpack

初步了解了Webpack工作方式后,我们一步步的开始学习使用Webpack。

全局安装webpack及webpack-cli

安装webpack

1
npm install -g webpack

安装webpack-cli

1
npm install -g webpack-cli

开始使用webpack

在桌面新建一个文件夹用于存放工程文件,文件夹名称为mywebpack。

在mywebpack文件夹中创建一个package.json文件

1
npm init -y

在mywebpack文件夹下创建index.html文件

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello webpack</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>

在mywebpack文件夹创建src文件夹,在src文件夹下创建index.js,代码如下

1
document.write("hello webpack");

使用webpack进行打包

1
webpack --mode development

执行后结果如下

【重要】webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack –mode development或者webpack –mode production,这样便会默认进行打包,入口文件是’./src/index.js’,输出路径是’./dist/main.js’,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行

  webpack –mode development

  webpack –mode production

这样便能够实现将’./src/index.js’打包成’./dist/main.js’。

不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:

  “dev”:”webpack –mode development”,

  “build”:”webpack –mode production”

执行webpack –mode development
执行npm run dev,相当于执行webpack –mode development

执行完毕后打开index.html效果如下

支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励