webpack

• 使用webpack要先安裝Node.js及NPM

• 在webpack裡，一張圖片、一個css甚至一個字型都稱為模組，他們彼此相依。webpack會處理彼此的相依並進行包裝。

• webpack適用在SPA。SPA通常是一個html檔案和一堆的js及檔案組成。

• webpack對使用者而言，只是一個js的設定檔。內含入口(entry)、出口(output)、載入器(loaders)、外掛程式(plugin)四個概念。

  • loaders:針對不同的副檔名的檔案，要安裝並指定不同的loader進行處理。

  • plugin:匯總css檔案，並重新命名。壓縮js檔案。定義生產環境。儲存入口html。

• webpack基本設定

  • 建立一個目錄，初始化該目錄

    npm init

  • 在本機局部安裝webpack

    npm install webpack --save-dev

  • 安裝webpack-dev-server

    npm install webpack-dev-server --save-dev

  • 在目錄內，建立一個webpack設定檔。webpack.config.js

    var config={
      //...
    }
    module.exports=config;

  • 在package.json的script裡增加快速啟動webpack-dev-server服務的指令。

        {
            //...
            "script":{
                "test":"echo \"Error:no test specified\" && exit 1",
                "dev":"webpack-dev-server --open --config webpack.config.js"
            },
            "build":{
                //...
            }

        }

        //當執行npm run dev指令時，就會執行該行dev命令。
        npm run dev

        //最終處理
        npm run build

• 在目錄下新增一個空的main.js作為入口的檔案，指後在webpack.config.js中進行入口和輸出的設定。

• 在webpack中使用vue-loader就可以對.vue格式的檔案進行處理。一個vue檔案分3部份。

    <template></template>
    <script></script>
    //使用scoped那麼CSS的樣式只在此元件有效
    <style scoped></style>