什么是webpack
webpack
可以看做是你的模块打包机,可以将浏览器不支持的一些拓展语言如sass
,less
,typeScript
将其打包成合适的模块以供浏览器使用。
为什么用webpack
今天的网页功能其实是很丰富的,他们拥有复杂的JS代码和一大堆的依赖,比如使用
Less
这样的预处理器,或者使用typeScript
这样的强校验类型语言。
这些改进都大大提升了我们的开发效率,并且也给了我们其他的一些想象空间。
初始化一个项目,让我们开始体验webpack吧!
//在目录下创建一个`myApp`文件夹并且初始化
npm init
一直按enter按钮,最后出现一个
package.json
文件,说明你创建成功了。
然后我们全局安装webpack
,webpack-cli
npm i webpack webpack-cli -g
1.通过
webpack -v
就可以看到当前webpack
的版本号,我默认安装的是4.16.2
2.然后创建一个src
目录,里面新建一个index.js
的文件
3.你可以在里面写一句简单的JS代码,比如:
alert("hello,world")
在当前根目录下执行
webpack
就能够看到你的根目录下已经多了一个dist
目录并且包含一个main.js
验证是否是成功
1.在根目录下创建index.html,并且引入打包出来的
dist
目录下的main.js
//如果本地没有http-server,请先安装`[npm i http-server -g]`
http-server -c-1
弹出刚才index.js
里面写的hello,world
,说明已经打包成功。
预告,下一篇讲解如果设置
webpack.config.js