搭建vue腳手架

注意：

1.使用npm 的方式安裝並引入vue時，須要用render函數，不然頁面會是空白。使用下載的vue文件引入就能夠不寫render函數，在html文件裏寫vue模板代碼。

 

安裝步驟：

1.安裝webpack,webpack-cli

yarn add webpack webpack-cli --dev

2.安裝熱更新

yarn add webpack-dev-server --dev

基本配置參數：

devServer:{
        host:'localhost',
        port:8080,//設置端口號
        contentBase:path.join(__dirname,'./dist'),//設置url的根目錄，若是不設置，則默認是指向項目根目錄
        historyApiFallback : true,//讓全部404的頁面定位到index.html      
         hot:true,//啓動熱更新，有的博客說必須搭配new webpack.HotModuleReplacementPlugin()插件，可是好像使用webpack-dev-server直接就能夠熱更新了。還沒弄清楚HotModuleReplacementPlugin的用法
         inline: true,//實時刷新，webpack-dev-server有兩種模式能夠實現自動刷新和模塊熱替換機制 
                               1. Iframe mode(默認,無需配置)頁面被嵌入在一個iframe裏面，而且在模塊變化的時候重載頁面 
                               2.inline mode（需配置）添加到bundle.js中，當刷新頁面的時候，一個小型的客戶端被添加到webpack.config.js的入口文件中

     compress:true,//Enable gzip compression for everything served
    overlay: true, //Shows a full-screen overlay in the browser
    stats: "errors-only" ,//To show only errors in your bundle
    open:true, //When open is enabled, the dev server will open the browser.
    proxy: {
        "/api": {
            target: "http://localhost:3000",
            pathRewrite: {"^/api" : ""}
        }
    }，//重定向

    },

historyApiFallback

這個配置屬性是用來應對返回404頁面時定向到特定頁面用的

語法是向historyApiFallback對象中的rewrites屬性傳一個對象格式，以下：

historyApiFallback:{
   rewrites:[
      {from:/./,to:'/404.html'}
   ]
  }

 hot

 

熱模塊替換機制

 hot:true

注意，若是你的項目中使用了熱模塊替換機制，HotModuleReplacementPlugin插件會自動添加到項目中，而不須要再在配置文件中作添加。

compress
這是一個布爾型的值，當它被設置爲true的時候對全部的服務器資源採用gzip壓縮
採用gzip壓縮的優勢和缺點：

優勢：對JS，CSS資源的壓縮率很高，能夠極大得提升文件傳輸的速率，從而提高web性能
缺點：服務端要對文件進行壓縮，而客戶端要進行解壓，增長了兩邊的負載

overlay

用於在瀏覽器輸出編譯錯誤的，默認是關閉的，須要手動打開：

overlay: true

若是你想江warnings一同打印出來，可設置：

overlay: {
warnings: true,
errors: true
}
stats

這個配置屬性用來控制編譯的時候shell上的輸出內容，由於咱們並不須要全部的內容，而只是須要部分的如errors等

在shell中只輸出errors：

stats: "errors-only"
open

當open選項被設置爲true時，dev server將直接打開瀏覽器

proxy

重定向是解決跨域的好辦法，當後端的接口擁有獨立的API，而前端想在同一個domain下訪問接口的時候，能夠經過設置proxy實現。

若是後端接口地址是10.10.10.10:3000,你能夠這樣設置：

proxy: {
"/api": "http://10.10.10.10:3000"
}
一個 「/api/users」地址的請求將被重定向到」http://10.10.10.10:3000/api/users「,若是不但願」api」在傳遞中被傳遞過去，可使用rewrite的方式實現：

proxy: {
  "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
    }
}

publicPath

用於設置編譯後文件的路徑，假設服務器的運行地址是 http://localhost:8080，輸出文件名設置爲bundle.js，那麼默認狀況下publicPath是」/」，所以文件地址爲http://localhost:8080/bundle.js 若是想要設置爲別的路徑能夠這樣：

publicPath: "/assets/"

設置後文件地址爲：http://localhost:8080/assets/bundle.js
注意：

確保publicPath的書寫規則：先後都有一個斜槓！

3.新建webpack.config.js基本配置文件，在配置文件裏進行初始化

const path=require('path');config={
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
};
module.exports=config;

4.在package.json配置dev指令

 "dev": "webpack-dev-server --open --config webpack.config.js", //熱更新在瀏覽器中打開頁面，讀取配置文件
 "build": "webpack --config webpack.config.js"  //打包成文件夾

5.在項目中添加模板文件，若是有index.html文件，項目會默認使用index.html文件做爲模板。若是沒有項目熱啓動會生成一個項目目錄頁面。

還可使用html-webpack-plugin插件指定模板文件及根據模板文件生成的文件的文件名，並將生成的文件一塊兒打包到輸出的文件夾中（dist/)。

安裝html-webpack-plugin

yarn add html-webpack-plugin --dev

在配置文件中添加設置：

 var HtmlwebpackPlugin=require('html-webpack-plugin');

plugins:[
    
      new HtmlwebpackPlugin({
        filename:'index.html',
        template:'./index.html',
        inject:false
      }),
   
    ]

 6.安裝css-loader,style-loader,解析導入的css文件

yarn  add css-loader style-loader --dev

修改配置文件

 1 module:{
 2   rules:[
 3           { 
 4             test:/\.css$/,
 5             use:['style-loader','css-loader']
 6     
 7           }
 8         ]     
10 }                

 

7.安裝extract-text-webpack-plugin ,合併css（會致使css修改不會觸發熱更新）

yarn add extract-text-webpack-plugin --dev 

將css文件及文件中的css合併到一個css文件中，不用的時候引入的css和寫的樣式並不會打包在一個css文件中

修改配置文件

 const ExtractTextPlugin=require(extract-text-webpack-plugin);

module:{
   rules:[
           { 
             test:/\.css$/,
              use:ExtractTextPlugin.extract({
                       use:'css-loader',
                       fallback:'style-loader'
                   })    
            }
         ]     
 }  

//在plugin中實例化,將css打包到main.css文件下，文件會被打包到設置的輸出文件夾的下面
plugins:[
    new ExtractTextPlugin("main.css")
]

8.安裝url-loader,file-loader,解析圖片，文件等資源的引入

補充說明：?limit=1024表示的做用是：
當遇到.gif、.png、.ttf等格式文件時，url-loader會把它們一塊兒編譯到dist目錄下，「？limit=1024」是指若是這個文件小於1kb，就以base64的形式加載，不會生成一個文件

yarn add url-loader file-loader --dev

在配置文件中設置loader：

module:{
   rules:[
           { 
             test:/\.（gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
             loader:'url-loader?limit=1024 
            }
         ]     
 } 

9.安裝vue及相關loader，在用vue進行單文件開發的時候須要解析vue文件及css和模板解析。可是貌似安裝vue-loader的時候會自動安裝vue-style-loader

vue-loader 會解析文件，提取每一個語言塊，若有必要會經過其它 loader 處理（好比<script>默認用babel-loader處理，<style>默認用style-loader處理），最後將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。

vue-loader 支持使用非默認語言，好比 CSS 預處理器，預編譯的 HTML 模版語言，經過設置語言塊的 lang 屬性。例如，你能夠像下面這樣使用 Sass 語法編寫樣式（須要安裝node-sass sass-loader）：

<style lang="sass">
 /* write Sass! */
</style>

說明：vue-loader在編譯.vue文件時，會對<template>、<script>、<style>分別處理，因此在vue-loader選項裏多了一項options來進一步對不一樣語言進行配置（後續會對option進行說明）

yarn  add vue vue-loader vue-style-loader vue-template-compiler --dev

安裝vue-hot-reload-api 。修改vue文件的時候會刷新頁面，安裝vue熱加載能夠局部刷新。不需配置

yarn add vue-hot-reload-api --dev

配置文件：

const VueLoaderPlugin=require("vue-loader/lib/plugin");

module:{
   rules:[
           { 
             test:/\.vue$/,
             loader:'vue-loader'
            }
         ]     
 }  

//在plugin中實例化,將css打包到main.css文件下，文件會被打包到設置的輸出文件夾的下面
plugins:[  
    new VueLoaderPlugin()
]

 10.安裝babel，轉換es6語法，babel-preset-env會將es6語法轉換成es5語法，若是要使用es6中新的內置對象好比 Promise 或者 WeakMap, 靜態方法好比 Array.from 或者 Object.assign, 實例方法好比 Array.prototype.includes 和生成器函數（提供給你使用 regenerator 插件）還須要安裝polyfill

yarn add babel babel-loader babel-core babel-preset-env --dev

yarn add babel-polyfill --dev

你須要在你的應用入口頂部經過 require 將 polyfill 引入進來。

確保它在任何其餘代碼/依賴聲明以前被調用！

在 webpack.config.js 中，將 babel-polyfill 加到你的 entry 數組中：

require("babel-polyfill");
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

也可使用babel-plugin-transform-runtime或babel-runtime代替babel-polyfill。

 

注意：安裝之後可能會報版本錯誤：

因此下載對應的版本就是了，下面是安裝babel-core 7.x的方法

npm install -D @babel/core

建立.babelrc文件：

{
    "presets": [
        "env"
    ]
}

 

 擴展： 

使用scss

安裝node-sass sass-loader

yarn add node-sass sass-loader --dev

配置文件：

module:{
     rules:[{
                  test:/\.scss$/,
                  use:['style-loader','css-loader','sass-loader']
           }]
 }

在.vue文件中使用須要在style標籤中添加lang="scss"或lang="sass"屬性

 

babel-loader，babel-core，babel-polify，babel-plugin-transform-runtime之間的關係

babel-core在npm官網中的解釋是
Babel compiler core.
也就是Babel編譯器的核心，所以意味着若是要使用babel-loader進行es6的轉碼你首先必須得安裝babel-core

npm install --save-dev babel-core
babel-core安裝了就行，無需手動配置和引入。

搞懂了babel-loader和babel-core的關係，那babel-polify和babel-plugin-transform-runtime又是啥呢？

因爲Babel默認只轉換新的javascript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。

 

所以，若是你的代碼中用到了這些API那麼你須要一個墊片庫，babel polyfill就是這個做用。

babel polyfill有三種：

* babel-runtime
* babel-plugin-transform-runtime
* babel-polyfill
transform-runtime在使用webpack打包時須要配置到 .babelrc文件的的plugins中

"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
後面的配置項不設置都將默認爲true，其實能夠徹底像下面這樣配置

"plugins": ["transform-runtime"]
babel-runtime和babel-plugin-transform-runtime的區別是使用babel-runtime時每次要轉碼一個api都須要手動添加

require('babel-runtime')；

而babel-plugin-transform-runtime會由工具自動添加，主要的功能是爲api提供沙箱的墊片方案，不會污染全局的api。

 

最後，babel-polyfill則是經過修改全局prototype來實現API的墊片的，所以比較適合用在單獨運行的項目中。

 webpack-dev-serve熱更新問題：

webpack-dev-server有熱更新功能，當webpack的js文件被修改，則會自動更新數據並刷新瀏覽器。

熱加載：

if (module.hot) { module.hot.accept(); }

這段代碼用於標誌哪一個模塊接收熱加載，若是是代碼入口模塊的話，就是入口模塊接收。

當修改文件時，Webpack 會從修改模塊開始根據依賴關係往入口方向查找熱加載接收代碼。若是沒有找到的話，默認是會刷新整個頁面的。若是找到的話，會替換那個修改模塊的代碼爲修改後的代碼，而且從修改模塊到接收熱加載之間的模塊的相關依賴模塊都會從新執行返回新模塊值，替換點模塊緩存。

因爲 Webpack 的熱加載會從新執行模塊，若是是使用 React，而且模塊熱加載寫在入口模塊裏，那麼代碼調整後就會從新執行 render。但因爲組件模塊從新執行返回了新的組件，這時前面掛載的組件狀態就不能保留了，效果就等於刷新頁面。

須要保留組件狀態的話，須要使用 react-hot-loader 來處理。

css 問題

若是使用style-loader將樣式添加到js文件中，在編寫樣式的時候能夠享受熱更新的效果，若是使用extract-text-webpack-plugin 將樣式提取，此組件並不支持熱更新。只會從新打包可是並不會刷新頁面。

官方建議在開發環境中關閉ExtractText組件。

html 問題

html-webpack-plugin 建立html 並不通過entry的入口，並無在熱更新的檢測範圍，因此並無熱更新

總結：css 和 html 沒有熱更新的緣由是沒有進入到entry 入口，不在熱跟新的檢測範圍內。