webpack基础篇——webpack的基本使用

Webpack

1.什么是webpack?

官方：webpack是一个现代的Javascript应用的静态模块打包工具。

非官方：webpack可以看做是一个模块打包机，它的作用是分析你的项目结构，找到js模块以及其它一些浏览器不能直接运行的扩展语言(如Scss、TypeScript等)，将它们打包成合适的(即浏览器可以识别的语言)格式来供浏览器使用。

2.webpack的基本使用

注意：webpack是依赖于node环境的，所以没有安装node的小伙伴一定要安装好node在来哦！

第一步：在项目中创建src和dist两个文件夹，src文件夹用来存放脚本文件，dist文件夹用来存放打包后的文件。

第二步：在src文件夹中创建main.js文件作为项目的入口，并在根目录创建index.html和webpack.config.js文件

第三步：在webpack.config.js中配置入口和出口

第四步：在终端中使用命令npm init初始化项目(输入名称然后一直回车最后输入yes即可)，初始化完成后会生成一个package.json的文件
最后输入yes即可完成初始化

项目出现package.json文件表示初始化成功

第五步：在package.json文件的scripts中加入build属性，并填入启动webpack的指令。这样做的目的是可以不使用原生的webpack指令来打包模块，而使用npm run build指令来打包模块。

第六步：在终端中输入npm run build指令来打包模块
输入完成后回车，发现有successfully，并且项目的dist文件夹中出现bundle.js文件表示打包成功，然后在index.html中引用bundle.js即可

测试：

接下来我们使用模块化的方式测试一些数据：
在src中创建test1.js和test2.js文件，并将它们的数据导出，然后在main.js中接收
test1.js

test2.js

main.js

再使用npm run build指令打包

打包成功

运行index.html，运行结果如下，打包成功！

喜欢的朋友可以点赞加收藏哦，谢谢。