手把手，教你使用WebPack打包一个文件

什么是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