webpack是一個模塊打包工具。
用vue項目來舉例：瀏覽器它是隻認識js，不認識vue的。而咱們寫的代碼後綴大可能是.vue的，在每一個.vue文件中均可能html、js、css甚至是圖片資源；而且因爲組件化，這些.vue文件之間還有錯綜複雜的關係。因此項目要被瀏覽器識別，咱們就要使用webpack將它們打包成js文件以及相應的資源文件。css
2、webpack的功能？
一、它能夠吧CSS，JS圖片當作模塊來處理html
二、它能夠吧以上的這些文件進行打包壓縮成一個JS文件，減小了HTTP的請求vue
三、根據模塊之間的依賴關係進行分析，按需加載webpack
四、能夠安裝一些插件，對插件進行打包處理web
3、安裝
npm install webpack -g(全局的安裝)
webpack -v #查看是否安裝成功
打包的方式
手動打包
a.js
webpack a.js /test/a2.js
自動打包.............
4、簡單使用
這裏咱們來理解下webpack是如何打包的npm
app/a.js
var tcl = "this is webpack test"; console.log(tcl); require("./index.css");
執行命令
webpack app/a.js public/b.js 、//意思是吧app下的a.js打包在public下的b.js
就會自動生成一個b.js的文件，如今就可使用並導入了瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
this is div test
</div>
<script src="bundle.js"></script>
</body>
</html>