vue-loader項目開發（一）

1、單文件組件

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

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

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

npm install -g vue-cli
vue init webpack GoldBean

3、目錄結構

   

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

在該項目結構中有兩個目錄存放靜態資源：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: ['.*']
    }
  ])
]
//...

  

5、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                  // 請求超時時間
})

6、使用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注冊中間件的方法

 7、生產環境部署

　　開發環境下，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：

8、使用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