webpack構建vue項目

webpack構建vue項目

1.腳手架vue-cli

npm i vue-cli -g

1.1使用vue-cli初始化項目

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init           generate a new project from a template   //從指定模板中生成一個新項目
    list           list available official templates  // 列出所有可用的官方模板
    build          prototype a new project     
    create         (for v3 warning only)
    help [cmd]     display help for [cmd]

2.創建項目

vue init webpack my-project

3.webpack目錄

4.構建工具

編譯開發環境

npm run dev

這個命令的配置是在package.json的script屬性中設置的，實質上它是由npm來引導執行入口程序dev-server.js完成以下的加載過程：

    加載環境變量-->合併webpack配置-->配置熱加載-->配置代理服務-->配置回退支持-->配置靜態資源-->加載開發服務器

1.加載環境變量

    從config目錄加載index.js和dev.env.js兩個模塊，準備開發調試環境所必須的一些目錄和全局變量

2.合併webpack配置

 在build目錄下有三個webpack文件，webpack-merge的包可以進行兩個webpack配置之間的合併

3.配置熱加載

    熱加載也就是熱刷新，代碼更改，webpack就會重新編譯，編譯文件在瀏覽器中重新加載

4.配置代理服務器

    模擬服務端。例如向服務器發出一個請求，可以利用代理服務器將請求攔截，然後返回一組這個api應該執行成功的結果。

5.配置靜態資源

    將圖片，字體，樣式以及編譯後的js腳本等，生成對應的一些Footprint(印記)存放在由開發服務器託管的一個static虛目錄中，使瀏覽器可以訪問到這些資源。每個footprint都是一些hash代碼。

6.加載開發服務器

    啓動一個express的web服務器，將配置好的模塊進行加載，使程序能在瀏覽器中訪問

7.打包命令

npm run build

webpack基本用法
1.樣式表的引用
2.字體的引用
3.用別名取代路徑引用

在webpack.base.config.js中

4.配置多入口程序

首先在build/webpack.base.config.js中的entry的屬性中配置入口文件：

這是用於告訴webpack哪幾個是入口文件，這些文件需要被生成到啓動頁的script內。
vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成html入口頁面並自動將生成後的JS文件和css文件的引用地址寫入到頁內的script中。

在build/webpack.dev.config.js的plugins中多配置一個HtmlWebpackPlugin插件，用於生成另一個入口頁。

在config/index.js中設置 build的admin入口

在webpack.prod.config.js中配置相同的配置，否則在生產時不會生成admin的入口 文件
最後，如果使用了vue-router就得對connect-history-api-fallback插件的配置進行修改，否則原有的默認配置只會將所有的請求發給index.html，這樣就會導致history api 沒有辦法正確的將請求指向admin.html，導致加載失敗。

最後在dist中生成兩個入口文件index.html和admin.html