什么是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
1532596730874.jpg
//如果本地没有http-server,请先安装`[npm i http-server -g]`
http-server -c-1
1532596601199.jpg
弹出刚才index.js里面写的hello,world,说明已经打包成功。
预告,下一篇讲解如果设置
webpack.config.js

