webpack是一個模塊打包工具。
用vue項目來舉例：瀏覽器它是只認識js，不認識vue的。而我們寫的代碼后綴大多是.vue的，在每個.vue文件中都可能html、js、css甚至是圖片資源；並且由於組件化，這些.vue文件之間還有錯綜復雜的關系。所以項目要被瀏覽器識別，我們就要使用webpack將它們打包成js文件以及相應的資源文件。

二、webpack的功能？

　　1、它可以吧CSS，JS圖片當做模塊來處理

　　2、它可以吧以上的這些文件進行打包壓縮成一個JS文件，減少了HTTP的請求

　　3、根據模塊之間的依賴關系進行分析，按需加載

　　4、可以安裝一些插件，對插件進行打包處理

三、安裝

npm install webpack -g(全局的安裝)

webpack -v #查看是否安裝成功

打包的方式

手動打包

 a.js
webpack a.js /test/a2.js

自動打包.............

四、簡單使用

這里我們來理解下webpack是如何打包的

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>

vue 之webpack打包工具的使用

一、什么是webpack?