經常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等兩相似的文件名。

其實以上兩個文件名的內容是一樣的，不過帶min代表的是佔用最小的空間，為項目提高性能。壓縮的部分如換行，空格等。

可以看出兩文件的體積相差很大。

所以我們一般的話項目上線會用到帶min的文件，而不帶的一般用在開發中，方便學習查看。

同理，自己寫的css ,js也是可以打包t提高性能的（html是不能打包的）。

實現打包功能的就是構建化工具：Grunt、Gulp、Webpack

一些説明：

1.構建化工具，需要NodeJs 環境支持（安裝nodejs)

2.  nodejs 的安裝自帶npm(node包管理工具)安裝（npm：node package manager)

3.使用npm 的命令可以創建工程項目，可以打包項目

Webpack：是一個模塊打包器(bundler)。

1.在Webpack看來, 前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理

2.它將根據模塊的依賴關係進行靜態分析，生成對應的靜態資源

3.Webpack 本身只能加載JS/JSON模塊，如果要加載其他類型的文件(模塊)，就需要使用對應的Loader 進行轉換/加載，比如 css-loader

4.Loader 本身也是JavaScript 模塊,運行在 node.js 環境中，即可以使用npm install 模塊名來安裝

5.配置文件webpack.config.js : 是一個node模塊，返回一個 json 格式的配置信息對象

6.插件件可以完成一些Loader不能完成的功能。一般是在 webpack 的配置信息 plugins 選項中指定.

CleanWebpackPlugin: 自動清除指定文件夾資源
        HtmlWebpackPlugin: 自動生成HTML文件並
        UglifyJSPlugin: 壓縮js文件

安裝webpack

npm install webpack -g //全局安裝

npm install webpack --save-dev //局部安裝

參考資料遇到問題，待續。。。。。

好記性不如爛筆頭，每天記錄一點點