webpack打包机制解析
先来说一下webpack,分开来讲就是web pack 即web文件打包
webpack是被在npm包中开发使用的文件集合。它的功能就是打包文件。
如webpack一样，node.js中集成的npm包管理器中被上传了7万多的应用包了，对于我们来说，可能有些包永远也用不上。但存在即合理，如我们写的日记一样，别人一点用也没有可能，但对我们自己来讲，这是一种有意义的事情。
所以我们先全局装一下webpack包：npm install webpack -g
然后我们就可以在任何文件夹下使用 webpack 这个命令了。
首先，我们来从最简单的文件来分析webpack打包机制：在你的文件目录中创建一个index.js文件
document.body.innerHTML="<h3>文件打包成功，引入成功...</h3>"
然后，可以在文件的根目录中用终端输入命令：webpack index.js bundle.js
即可将index.js打包生成bundle.js
这是最原始的打包命令，也是最好理解的一行命令
下面是index.html的内容：引入的是bundle.js
<body> 如果打包成功，下面将显示打包文件的内容：<br>
</body>
<script src="./bundle.js"></script>
接下来，进一步解读webpack
上面只是打包一个文件 ，这个命令要写这么多，那么我们要打包一个项目的话，可就不是一个文件的事情了，所以下面说说项目的打包方法。
不管什么项目，vue框架写的，还是angular框架写的等。跟我们的打包工作没有关系。我们只关心如何让打包功能成功即可。
在某个项目的根目录下新建一个名为webpack.config.js的文件。
这个文件要写以下几项：
module.exports={
entry:"打包将从这个路径开始进入"，
output:{ path:"打包输出路径"，filename:"要生成的文件名" }，
module:{ loaders:[ 这里是项目中有关的文件类型，如css,sass,js,jpg,vue,ts...等,它们都是项目中要被打包机解析的文件，以确保它们能被认识。] }
}
在写好这个配置文件之后，我们的命令只要用：webpack 即可。