webpack打包测试_webpack学习笔记（1）

今天学习了一下webpack，一开始使用vue-cli是无比的爽，开箱即可用，但是这会让我联想到，是什么让这些静态文件都引入到html中的，代码呢，肯定是隐藏了，我只知道vue-cli是用webpack去打包的，那么问题来了，是不是我学好了webpack我就可以自己去搭建手脚架了？先不多说操练起来。

我是参考webpack的官方文档去做测试的

起步 | webpack 中文网​www.webpackjs.com

我对webpack的认识

首先我来 谈谈自己对webpack的认识，之前只是接触过这相关的只是，脑子里有个大概的印象，webpack就是个静态资源的打包工具，为什么要打包？对为什么？你想想看，

如果我们不存在打包，只是依靠script标签去引用，使用的依赖的js、css都要手动的去引入，他们之间可能存在一定的隐藏的依赖的关系，但是在html中是提现不出来的，若顺序错了，或者是依赖的文件没有引入的话，可能就造成程序启动不了，这。。。过于难了吧，所以如果我们依赖的文件通过npm下载，import、require导入的需要的文件，webpack通过你的导入关系，也就是依赖关系形成一个依赖的网图，一层层去解析，这就形成了依赖关系，并且导入的模块必须存在。

这就清楚了，webpack是通过文件的依赖关系去打包静态文件的，很可以！

webpack的demo体验

执行npx webpack这样是将index.js文件打包成main.js 但是我们是手动的引入的打包后的文件，这样页面是出现了index.js的hello^webpack ，初体验成功一小步。