vue-loader項目開發（一）

一、單文件組件

　　關注點分離不等於文件類型分離。在現代 UI 開發中，咱們已經發現相比於把代碼庫分離成三個大的層次並將其相互交織起來，把它們劃分爲鬆散耦合的組件再將其組合起來更合理一些。在一個組件裏，其模板、邏輯和樣式是內部耦合的，而且把他們搭配在一塊兒實際上使得組件更加內聚且更可維護。

　　vue-loader 是一個 webpack 的 loader，能夠將Vue 組件（.vue文件）轉換爲 JavaScript 模塊。.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每一個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還容許添加可選的自定義塊。

二、推薦用腳手架工具 vue-cli 來建立一個使用 vue-loader 的項目

npm install -g vue-cli
vue init webpack GoldBean

三、目錄結構

   

四、處理靜態資源，如圖片

在該項目結構中有兩個目錄存放靜態資源：src/assets（webpack處理）和static/（複製）

1）url-loader 功能相似於 file-loader，可是在文件大小（單位 byte）低於指定的限制時，能夠返回一個 DataURL（base64）。該項目當圖片小於10000字節時，會被打包成base64圖片，不然圖片會被打包到static/img/[name].[hash:7].[ext]

    

2）static/裏的文件不會被webpack處理，會被直接複製到最終位置

CopyWebpackPlugin：將文件或文件夾複製到構建目錄

//webpack.dev.conf.js或webpack.prod.conf.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
//...
plugins: [
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.dev.assetsSubDirectory, //static
      ignore: ['.*']
    }
  ])
]
//...

  

五、webpack-dev-server 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載

devServer.hot：是否啓用 webpack 的模塊熱替換特性

devServer.inline：是否啓用內聯模式，默認狀況下，應用程序啓用內聯模式。推薦使用模塊熱替換的內聯模式，由於它包含來自 websocket 的 HMR 觸發器。

devServer.host：指定使用一個 host。默認是 localhost

devServer.port：指定要監聽請求的端口號

devServer.open：瀏覽器是否自動加載頁面

devServer.proxy：若是你有單獨的後端開發服務器 API，而且但願在同域名下發送 API 請求 ，那麼代理某些 URL 會頗有用。dev-server 使用了很是強大的 http-proxy-middleware 包（跨域）

//webpack.dev.conf.js
devServer: {
    proxy: config.dev.proxyTable
}
//xxx.js
proxyTable: {
  "/portal": {
    target: "http://localhost:8080"
    // target: "http://192.168.43.24:8080"
  }
}

  host: 'localhost',

  port: 8081,

//dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8081/portal"'
}
//utils/request.js（處理請求）
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 60000                  // 請求超時時間
})

六、使用http-proxy-middleware中間件解決跨域問題

//dev-server.js
var express = require('express');
var proxyMiddleware = require('http-proxy-middleware');
var app = express();
app.use(proxyMiddleware('/tt', { target: 'http://localhost:8090' })) //use是express註冊中間件的方法

 七、生產環境部署

　　開發環境下，Vue 會提供不少警告來幫你對付常見的錯誤與陷阱。而在生產環境下，這些警告語句卻沒有用，反而會增長應用的體積。此外，有些警告檢查還有一些小的運行時開銷，這在生產環境模式下是能夠避免的。生產環境打包要作兩件事：壓縮應用代碼；去除 Vue.js 中的警告。

　　當使用 webpack 或 Browserify 相似的構建工具時，Vue 源碼會根據 process.env.NODE_ENV 決定是否啓用生產環境模式，默認狀況爲開發環境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啓用 Vue 的生產環境模式，同時在構建過程當中警告語句也會被壓縮工具去除。這些全部 vue-cli 模板中都預先配置好了。

　　區分開發和生產環境：使用環境變量；使用兩個分開的 webpack 配置文件，一個用於開發環境（webpack.dev.conf.js），一個用於生產環境（webpack.prod.conf.js）。把可能共用的配置放到第三個文件中（webpack.base.conf.js）

　　使用 webpack 的 DefinePlugin 來指定生產環境，以便在壓縮時能夠讓 UglifyJS 自動刪除警告代碼塊。

//webpack.prod.conf.js
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
}

1）devtool（使用 source map）

　　當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位置。例如，若是將三個源文件（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，而其中一個源文件包含一個錯誤，那麼堆棧跟蹤就會簡單地指向到 bundle.js。這並一般沒有太多幫助，由於你可能須要準確地知道錯誤來自於哪一個源文件。爲了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯後的代碼映射回原始源代碼。若是一個錯誤來自於 b.js，source map 就會明確的告訴你。

適合用於dev環境的devtool：https://doc.webpack-china.org/configuration/devtool/#development；適合用於build環境的devtool：https://doc.webpack-china.org/configuration/devtool/#production

//webpack配置js
//dev
devtool: 'cheap-module-eval-source-map'
//build
devtool: '#source-map'

2）uglifyjs-webpack-plugin：這個插件使用 UglifyJS 去壓縮你的JavaScript代碼。

//webpack.prod.conf.js
plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: config.build.productionSourceMap, //true：使用 SourceMaps 將錯誤信息的位置映射到模塊。這會減慢編譯的速度。
    parallel: true //使用多進程並行運行和文件緩存來提升構建速度
  })
]

dev： 

build：

八、使用babel處理es2015

　　當項目中配置了 babel-loader 或者 buble-loader，vue-loader 會使用他們處理全部 .vue 文件中的 <script> 部分，容許咱們在 Vue 組件中使用 ES2015。因爲 vue-loader 只處理 .vue 文件，你須要告訴 webpack 如何使用 babel-loader 或者 buble-loader 處理普通 .js 文件。

a）安裝：npm install --save-dev babel-loader babel-core

b）使用：webpack.config.js

c）建立  .babelrc 配置文件（在項目的根目錄中建立一個 .babelrc 文件並啓用一些插件）

　　在沒有任何配置選項的狀況下，babel-preset-env 與 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一塊兒）的行爲徹底相同。es6模塊語法默認是commonJS，不轉換（"modules": false）設置支持瀏覽器版本（"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}）（ 若是你但願改變你的目標環境，請確保更新package.json和.babelrc文件）。 若是 plugin 是經過 npm 安裝，你能夠傳入 plugin 名字給 babel，babel 將檢查它是否安裝在  node_modules 中（"plugins": ["babel-plugin-myPlugin"]）。 若是你使用 babel-plugin- 做爲 plugin 的前綴，你可使用簡寫的形式省略掉該前綴（"plugins": ["myPlugin"]）。preset 與之相同（"presets": ["babel-preset-myPreset"]  vs  "presets": ["myPreset"]）

Plugin/Preset 排序：Plugin 會運行在 Preset 以前；Plugin 會從第一個開始順序執行；Preset 的順序則恰好相反。此項目中plugins先執行transform-vue-jsx 再執行 

transform-runtime，preset先執行stage-2再執行env（向後兼容）。參考： https://babeljs.cn/docs/plugins