webpack(三):webpack起步

创建如下文件和文件夹:
在这里插入图片描述
dist文件夹:用于存放之后打包的文件
src文件:用于存放我们写的源文件
3.1commonJS模块化导出
3.2commonJS模块化导入
3.3js文件的打包
3.4使用打包后的文件
3.5ES6模块化的导出
3.6ES6模块化的导入
3.7重新打包

3.1commonJS模块化导出

这是基于nodejs使用的导出方式,没有nodejs的支撑是无法使用的!
module.exports= {} 导出
在这里插入图片描述

3.2commonJS模块化导入

require导入
在这里插入图片描述

3.3js文件的打包

  现在的js文件中使用了模块化的方式进行开发,他们可以直接使用吗?
  不可以。因为如果直接在index.html引入这两个js文件,浏览器并不识别其中的模块化代码。另外,在真实项目中当有许多这样的js文件时,我们一个个引用非常麻烦,并且后期非常不方便对它们进行管理。
  我们应该怎么做呢?
  使用webpack工具,对多个js文件进行打包。我们知道,webpack就是一个模块化的打包工具,所以它支持我们代码中写模块化,可以对模块化的代码进行处理。另外,如果在处理完所有模块之间的关系后,将多个js打包到一个js文件中,引入时就变得非常方便了。
首先,切换到项目的路径下
在这里插入图片描述
使用如下webpack的打包指令:将main.js(包含文件中导入的其他依赖文件,如下图所示)打包成bundle.js
在这里插入图片描述
webpack src/main.js dist/bundle.js
在这里插入图片描述
如图所示,打包成功
在这里插入图片描述

3.4使用打包后的文件

打包后会在dist文件下,生成一个bundle.js文件,bundle.js文件,是webpack处理了项目之间文件依赖后生成的一个js文件,我们只需要将这个js文件在index.html中引入即可。
在这里插入图片描述
打开网页,查看效果:
在这里插入图片描述

3.5ES6模块化的导出

在这里插入图片描述

3.6ES6模块化的导入

在这里插入图片描述

3.7重新打包

修改了文件就要重新打包使其生效
在这里插入图片描述
刷新网页,查看效果:
在这里插入图片描述
参考文档

发布了14 篇原创文章 · 获赞 0 · 访问量 763
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览