超簡單，webpack配置

      有看過個人博客的童鞋可能有看到我最近有在利用閒暇時間作一個先後臺均涵蓋的音樂播放器項目，可是呢，我是一個小小的前端，對後臺的瞭解能夠說只停留在很初級的階段，固然了音樂播放器的音樂列表是後臺輪循出來的，我呢，準備用node，固然了，包括去外地出差了3周，音樂項目目前還未更新，等這些後臺的東東都理清了，各個模塊就能夠繼續了。

      好了廢話很少說，咱一塊兒來看看前端自動化構建工具（或者說是一個模塊打包機）webpack的基本配置過程吧。

      首先先來講下webpack是什麼，node是什麼，npm又是什麼，一個個來：

      一、npm：官方的說法是包管理工具，這些太虛了，雖然說它確確實實就是一個提供給程序員方便的安裝各類插件各類包的工具，但咱不這樣理解，你先想一想，咱們之前下載軟件或者rar等等文件是怎麼下載呢？去網上找對吧？而後在對應的官網或一些綜合的軟件網來下載，很麻煩對吧？既然麻煩，程序員都是懶癌重度患者，絕對會有人想很簡單的方式來下載軟件，對吧？npm就誕生了，有了npm工具，你下載軟件好比QQ啊，微信啊，你一句npm install QQ，就幫你下載安裝了這個平臺裏的QQ軟件，install是安裝的意思，很簡單的一句命令，npm （前綴）+ install（安裝）+ (package-name，包的名稱)，很方便吧？固然啦,npm就至關於一個軟件網（什麼太平洋軟件網啊啥的），下載的軟件是npm這個平臺有的就行，不過呢，npm不是給咱們下載QQ用的，是給咱們開發者下載各類包用的，好比jquery,bootstrap,vue等等。你不再用去官網啥的下載jquery最新版了，只需一句 npm install jquery就搞定了，完全解決你的懶癌晚期。固然了爲了提高下載安裝的速度，還有cnpm（淘寶鏡像）和bower(twitter提供，偏前臺)，這些就不扯了，想了解的自行百度。

      二、node：某一天某位大神，把谷歌的V8引擎從瀏覽器移植出來了，由於他以爲爲啥js文件只能經過瀏覽器渲染呢？它的本質上不就跟java同樣是一種面嚮對象語言麼？（固然了仍是有不一樣）只要有jvm就能夠各類平臺運行，把這個jvm單獨拿出來，用於做爲js文件的解釋器或者渲染（應該不叫渲染，暫時詞窮）引擎，而node就是基於此，用原生js語言開發出來的一個環境，它再也不是在網頁上作簡簡單單的表單提交或是一些異步處理，行爲層處理，它是來操做文件，操做路徑，操做通信了，或者總的來講是操做計算機系統自己了，既然這樣其實就和php，java比較接近了，它更須要的是邏輯的處理與業務的實現，搭建什麼樣的服務器架構等等，固然了它與php這些有線程池的後臺語言不一樣，由於它是基於ECMAScript的，它僅有一個線程，並作異步操做，舉個很簡單的例子，不知道各位有沒有遇到一個坑，就是setInterval();裏面的函數執行的時間超過延遲間隔的時間，而後你會發現，setInterval自己它不會管你內部程序是怎樣執行的，執行多久，簡單說就是它不會等你，反正我隔這麼久我就執行下這個函數一次，我管你執行多久，這就是異步，分開的，各幹各的，而node的程序執行過程就是這樣，充斥着各類各樣的異步，可跟C語言不一樣，從上到下一步步走，沒那麼簡單= = 

     三、webpack：是否是太囉嗦了呢，好了進入正題，webpack，咱們平時頁面引入js或是css怎麼引入呢？可能會有不少不少的<script></script>和<link />對吧，這讓咱們很煩，並且加多了太多各個文件的話會致使產生太多不必的瀏覽器請求，下降性能，那怎麼樣作好呢？合併唄，合成一個或少個文件，可是呢，咱們維護的時候又要拆開一個個模塊來，這就矛盾了，對吧？好像冥冥之中缺乏了某種中間層來幫咱們處理這個東西，有用過less和Sass的應該比較清楚，不清楚的看下bootstrap的源碼，就是那個bootstrap.css，你會發現神馬代碼都沒有，只有一個個的@import，沒有錯，這就是合併，可是呢也不影響咱們維護，由於咱們直接去對應的模塊裏改，它自動就能夠幫咱們合成新的總css文件。能夠看看下面的：

    而這，就是模塊化思惟，而這也是webpack或者甚至說現代化編程的核心（ES6,ES7很明顯的也是這樣），固然了，webpack由於有個loader機制能夠把一切文件轉換成js文件，因此號稱是啥呢，萬能打包機= =，舉個簡單例子，webpack可讓咱們引入n多個<script></script>變成一個，甚至哪些html是對應哪些的js,css，它均可以一一幫咱們對應好，咱們無需再手動引入。

    配置啥的很簡單很簡單。

    先別看我這些命令，看下面：

    npm init

    npm install webpack --save-dev    （--save-dev是保存在開發環境下（dev：development），固然也有-g（global全局下，可是呢，全局的東西就會有牽一髮而動全身，咱最好仍是一個項目對應一個node-module））

    npm install webpack-cli --save-dev     (-cli是webpack提供的一個命令行接口，便於對構建過程進行配置和交互)

    npm run build

    一、創一個文件夾，隨便啥名字，就好比webpack-example吧

    二、在這個文件夾下打開cmd或者PowerShell（Shift+鼠標右鍵能夠看到打開命令行選項），先作一個項目初始化，npm init，它會問你一些基本信息，由於咱們是簡單弄個例子，因此一直回車就行了。到時候有警告好比沒有項目描述啊，項目做者啊等等不用管它，不影響。這時候你會發現文件夾多了一個package.json文件。這個文件是啥呢，能夠理解成一個項目包文件，記錄各類信息，好比咱們安裝了webpack包，細心的你會發現package.json文件devDependencies(開發環境依賴)多了一個webpack及它對應的版本。好了這個先到這。

    三、接下來呢就是安裝 webpack 跟 webpack-cli了，

         

      四、配置下webpack，很簡單的一個js配置文件：

         假設咱們如今要把common.js，index.js，module.js合成輸出成一個文件。

         咱先得有這幾個文件對吧：（作測試咱就怎麼簡單怎麼來）

         common.js隨便寫一句：console.log("dorsey");

         index.js隨便寫一句：console.log("my name is dorseyCh!");

         module.js隨便寫一句：console.log("my name is chenduoxin,my English is dorseyCh!");

         看看哈：

        而後呢新建一個js文件作配置文件，咱叫作webpack.config.js吧。

       內容呢：

let path=require('path'); //這個你能夠試試不要了，而後把下面的路徑換成你熟悉的什麼‘./build/bundle.js’這樣的，看看會發生什麼？
module.exports={
    mode:'development',    //爲何要把模型設置成開發環境，由於不設置你會發現生成的build文件夾下的bundle.js是壓縮過的，也就是生成環境下的文件。
    entry:['./app/common.js','./app/index.js','./app/module.js'],  //無外乎就是一個輸入，看看，是否是至關於我在輸入端寫入3個文件，
    // 而後輸出成一個bundle.js，而實際上呢，咱們頁面引用只須要引輸出後的文件便可。
    output:{                 //輸出
        path:path.resolve(__dirname,'build'), //路徑，其實這個呢就是經過path模塊把路徑轉化爲絕對路徑，你若是寫成上面剛開始說的那個，
        // 看似行得通對吧= =，也直觀明瞭，不過呢，得絕對路徑，否則程序找不到
        filename:'bundle.js'    //輸出的文件名，有則寫，無則新建
    }
};

 

       而後呢：

       在配置文件webpack.config.js裏的script屬性里加一條："build":"webpack"，利用webpack-cli提供好的接口來配置變成這樣：

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8"
  }
}

       這句話什麼意思呢？首先，script這裏面是一些命令行縮寫，明白個人意思吧？咱們是要經過webpack把剛剛的配置文件跑起來，對吧，讓它完成咱們須要的打包功能，咱們這裏還好，有時候在PowerShell裏面的一些命令很長很長，咱們就能夠事先在這配置好，而後運行的時候呢，直接運行前面的屬性，兩個是等效的。

        那看看效果是啥：

        

    項目中是否是自動幫咱們生成了一個大廈（輸出文件），是的就是一個build/bundle.js，而這個bundle.js跟咱們上面3個js是等效的，你信不信？

    五、不信是吧？不要緊，咱用個html引一下不就能夠了？

    

         看看輸出的結果：

         是否是蠻神奇的？

 再看看瀏覽器的請求：

是否是就剩一個啦！簡單快捷粗暴接地氣，對吧？

好了，簡單的配置就到這，先這樣；

  總結的一句話，咱們寫代碼，確定是要在common.js，index.js，module.js這種裏面寫的，可是呢，最終的輸出或是項目的引入就不是這樣的，會匯合，會一對多，多對多，一對一等等的方式進行打包，或各類形式的合併混合打包。之後像less,Sass，webpack這樣的確定愈來愈多，這種模塊化編程，統一化管理，現代化輸出確定是將來會一直持續的方式，也許之後的之後會有更好的方式來替代，但目前爲止，咱們得說這種模式暫時是最好的，對吧！