使用webpack合并js文件

使⽤webpack合并js⽂件

Webpack 是⼀个前端资源加载/打包⼯具。它将根据模块的依赖关系进⾏静态分析，然后将这些模块按照指定的规则⽣成对应的静态资源。

在代码实践之前，先说⼀写webpack的基础知识。

1、为什要使⽤WebPack

竹胶合模板

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

防臭鞋模块化，让我们可以把复杂的程序细化为⼩的⽂件;

类似于TypeScript这种在JavaScript基础上拓展的开发语⾔：使我们能够实现⽬前版本的JavaScript不能直接使⽤的特性，并且之后还能能装换为JavaScript⽂件使浏览器可以识别；

Scss，less等CSS预处理器

…

2、什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项⽬结构，到JavaScript模块以及其它的⼀些浏览器不能直接运⾏的拓展语⾔（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使⽤。

3、WebPack和Grunt以及Gulp相⽐有什么特性

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

Grunt和Gulp的⼯作⽅式是：在⼀个配置⽂件中，指明对某些⽂件进⾏类似编译，组合，压缩等任务的具体步骤，这个⼯具之后可以⾃动替你完成这些任务。

这些改进确实⼤⼤的提⾼了我们的开发效率，但是利⽤它们开发的⽂件往往需要进⾏额外的处理才能让浏览器识别,⽽⼿动处理⼜是⾮常反锁的，这就为WebPack类的⼯具的出现提供了需求。人脸识别主机

Webpack的⼯作⽅式是：把你的项⽬当做⼀个整体，通过⼀个给定的主⽂件（如：index.js），Webpack将从这个⽂件开始到你的项⽬的所有依赖⽂件，使⽤loaders处理它们，最后打包为⼀个浏览器可识别的JavaScript⽂件。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成⼀个静态⽂件，减少了页⾯的请求。

折80如果实在要把⼆者进⾏⽐较，Webpack的处理速度更快更直接，能打包更多不同类型的⽂件。

接下来我们简单为⼤家介绍

Webpack如何将多个js⽂件合并（注意这⾥只是⽂件的合并，即将多个写好的js合成⼀个js⽂件，以减少http请求）。安装webpack

在安装 Webpack 前，你本地环境需要⽀持 node.js。安装node.js可以参考node官⽅⽂档。

使⽤如下命令在全局安装webpack。

$ npm install webpack -g

webpack已经安装到计算机上，现在可以使⽤webpack命令了。

悬臂支架在项⽬中使⽤webpack

使⽤以下命令在项⽬根⽬录下⽣成package.json⽂件。

$ npm init

安装webpack到项⽬中

将webpack加⼊到pageage.json配制⽂件中，使⽤以下命令：

$npm install--save-dev webpack

超声波打磨机此时再看package.json⽂件，对⽐package.json刚刚创建时，新增加了⼀段代码。

配置fig.js⽂件

在项⽬的根⽬录下新建⼀个fig.js⽂件。配置⽂件如下：

context

上下⽂选项⽤来决定根⽬录（即绝对路径）的⼊⼝⽂件

entry

打包⽂件的⼊⼝点。

output

output选项告诉webpack如何编译⽂件到硬盘中，值得注意的是，虽然entry中可以使⽤⼀个对象传⼊多个⼊⼝点⽂件，但是只能给ouput 设置⼀个配置项。

最后，我们将上⾯的js合并成了⼀个single.js。只要在项⽬中引⼊这个js即可。

本文发布于:2024-09-25 17:21:09，感谢您对本站的认可！

标签：开发模块编译静态浏览器安装打包

留言与评论（共有 0 条评论）