前端自動化構建工具webpack （一）之webpack安裝 和 設置webpack.confi.js

目的：  模塊化開發，組件化開發，讓代碼符合開發規範，更高效

webpack做用：從pack，就知道這是包的意思，比較專業點叫作前端自動化打包構建工具，代碼錯誤檢查，預處理，文件合併（打包），代碼壓縮，

                         將各類文件包括es6de 文件轉化成es5的能夠被瀏覽器識別的文件。

 

webpack安裝：

           1.node下載安裝，最好有git，能夠利用git的命令行窗口。

                     node和webpack啥關係呢？爲何要求要有node環境？？？？

                     webpack官網安裝說明：在開始以前，請確保安裝了 Node.js 的最新版本

                     固然這是要求，你沒有理由不按照官網命令來辦。可是爲甚呢？爲何webpack的運行是基於nodejs呢？是在哪一步呢？

                      多是壓縮打包？，而且在命令窗口裏時不時的npm點東西，沒有nodejs還真不行，由於npm就是在node裏的,而且配置文件module.exports = { }也是nodejs的引入方式，因而可知，這個webpack必定是基於nodejs的

          2.全局安裝webpack和webpack-cli：npm install webpack  webpack-cli  -g；很疑惑的一點是我不知道爲何須要全局安裝。難道本地安裝還不夠嗎？

          3. 初始化項目：在項目文件夾的路徑下，執行npm init，會出現 packge.json這個無比重要的配置文件

                                   node_modules: 項目的依賴文件，很大，是真是的文件

                                     pack-lock.json:依賴文件的路徑版本。

                                     package.json文件：記錄了依賴devDependencies，node_modules和pack-lock.json兩個文件都沒必要傳，由於npm install 命令會自動的去找       pakege.json的依賴文件，去下載並生成新的node_modules和  pack-lock.json；

           4.局部安裝webpack 和webpack-cli；npm install webpack webpack-cli --save-dev   (簡寫成-d)；

           5.設置webpack的出口、入口  、loader   和  插件；

                    人口：index.js;

                    出口：   默認是 dist/main.js，但必須注意：這要求是個對象：我直接幹成字符串報了下面錯誤

output正確格式：   是一個對象：有path和filename兩個屬性；      dist文件夾能夠本身建立，包括main.js

若是有多個入口多個出口，

最重要的設置之一：配置loader;

      第一： 爲何要配置圖片的loader？？？img爲何直接用不行，

                 webpack是一個打包器，天生只認識JavaScript，對以外的css，img，等一律都不認識，必須轉換成。

               看一句官方的原話：loader 描述了 webpack 如何處理 非 JavaScript(non-JavaScript) _模塊_，而且在 bundle 中引入這些依賴。

               也有人說在webpack裏，萬物皆模塊。

                這就代表：在webpack裏，想要顯示圖片，必需要用圖片加載器，

   。

        第二：設置output裏的publicPath：

                            1. path 跟publicPath同樣，都有表示輸出路徑的意思，但查了好多資料，個人結論是:

                                    publicPath表示js和html取靜態文件的路徑：官方的解釋：

                                   也就是說，publicPath是用於更新內嵌到文件裏的url值。這個public若是不配，js和html找靜態資源會找不到。

                            2.  publicPath  (1)能夠設置相對路徑，（和path不同，path是絕對路徑）;

                                                      (2)最好以 ‘/’ 結尾，是爲了配合rules裏的use裏或者option的name屬性與它對接。

 

         

       第三：圖片兩種加載器均可以實現加載圖片：

                        url-loader：能夠將圖片轉爲base64字符串，能更快的加載圖片，但當圖片不少，就須要加載一堆base64的編碼字符串，

                        file-loader: 一旦圖片過大， 就須要使用file-loader加載本地圖片，故url-loader能夠設置圖片超過多少字節時，使用file-loader加載圖片（？limit=XX）

                          或者 

 注意name:'[name].[ext]'這種寫法

                

順便設置一下mode吧，要不webpack老發出warning

 

webpack的基本配置：這個我老師跟我講，必須手動會幹