JavaScript中使用import 和require打包后实现原理分析

前端之家收集整理的这篇文章主要介绍了JavaScript中使用import 和require打包后实现原理分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行!

今天通过个例子理解一下打包前,和打包后的代码!

1.创建文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件包括使用webpack打包生成的js文件以及一个 index.html 文件)。接下来我们再创建三个文件:

  • index.html --放在public文件夹中;
  • Greeter.js -- 放在app文件夹中;
  • main.js -- 放在app文件夹中;

此时项目结构如下图所示

项目结构

我们在 index.html 文件中写入最基础的HTML代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为 bundle.js ,之后我们还会详细讲述)。

<Meta charset="utf-8"> sample Project

猜你在找的JavaScript相关文章