我们在工程新建两个文件夹,一个是 src 用于存放我们写的源文件,一个是 dist文件夹:用于存放之后打包的文件。
类似这样:
一般都是在src中写一个 项目的入口文件,一般叫 index.js 但我这写main.js 看得出即可。
因为src文件夹下写源文件 而且 有了入口文件,那么我们用webpack来打包。
mathUtils.js 里面写一些数学运算函数 然后导出数据:
点击查看mathUtils.js
然后我们在main.js中导入 mathUtil.js导出的值即可:
点击查看main.js
因为现在是模块化开发,webpack就是一个模块化的打包工具,所以它支持我们代码中写模块化,可以对模块化的代码进行处理,,如果在处理完所有模块之间的关系后,将多个js打包到一个js文件中,引入时就变得非常方便了。所以我们需要打包,
最后一步 打包:
我们在终端写这么一条语句:
webpack src/main.js dist/bundle.js
意思就是说: 打包 src下面的main.js 然后 打包在 dist下面的 bundle.js文件中
疑惑: 为什么mathUtil.js不打包? 因为他已经导入导出的关系在main.js中了,和main.js存在依赖,webpack会自动找到且打包,非常的方便!
执行后如下图:而且你 dist下多一个 bundle.js 文件
然后你在 页面导入这个bundle :
运行发现:
这就是 webpack的基本使用打包了。
作者:咸瑜