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 即可。