前端的構建化工具Webpack

常常看到如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 //局部安裝

 

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

https://my.oschina.net/mdxlcj/blog/1626534

https://my.oschina.net/mdxlcj/blog/1802438