搭建webpack簡易腳手架

CharlesYu01發表於2019-01-26

Web

關鍵詞 vue typescript webpack

本文是為下一篇《3分鐘搞定 Vue + TypeScript開發》文章做的知識鋪墊，文章結尾提供完整的github示例程式碼庫。

準備

已經掌握vue開發的情況下，想體驗一下TypeScript開發vue，可以通過以下過程配置一個腳手架。

1.閱讀webpack官網文件 www.webpackjs.com/

webpack工作原理
- 入口起點(entry points)
- 輸出(output)
- 模式(mode)
- loader
- 外掛(plugins)
- 配置(configuration)
- 模組(modules)
- 模組解析(module resolution)
- 依賴圖(dependency graph)
- manifest
- 構建目標(targets)
- 模組熱替換(hot module replace)

2.閱讀TypeScript官網文件 www.tslang.cn/docs/home.h…

腳手架搭建瞭解輔導教程部分
- 5分鐘上手TypeScript
- ASP.NET Core
- Gulp
- JavaScript遷移
- React &
  Webpack

3.閱讀Vue官網文件

vue配置入門: cn.vuejs.org/v2/guide/in…

開始配置

npm <
5.x 建議升級到更高版本(當前穩定版本6.7.0), 或使用yarn來管理包

配置檔案

完成準備工作後下面就要進行這3類檔案的配置
- package.json
- webpack.config.js
- tsconfig.json
配置思路，漸進式配置避免過程中問題堆積，先讓腳手架工作起來
- 首先要讓webpack能執行起來
- 安裝Vue框架, 配置Vue、TS編譯所需的loader和plugins

讓webpack執行起來

這是一個使webpack能工作的最小配置。

當寫好一個webpack配置, 從最簡單的一步開始感受一下webpack, 建立親切感往後就容易多了。

webpack配置檔案:

/** * @file ./config/webpack.config.js * @author CharlesYu01 */module.exports = { 
 entry: './index.ts',  mode: 'production'
  };
複製程式碼

編譯執行結果：

$  webpack --config ./config/webpack.config.jsHash: 067221c5690968574418Version: webpack 4.29.0Time: 86msBuilt at: 2019-01-26 14:05:49  Asset       Size  Chunks             Chunk Namesmain.js  930 bytes       0  [emitted]  mainEntrypoint main = main.js[0] ./index.ts 0 bytes {0
  } [built]複製程式碼

可以看一下編譯出來的內容，預設在./dist/main.js中。

ps：恩，你已經掌握了webpack最核心的玩法了，處理更復雜的工作時再去了解loader、plugins的原理。

用Vue+TS編寫一個可瀏覽的頁面

安裝外掛

// package.json // TODO: 掌握各外掛的作用..."devDependencies": { 
"awesome-typescript-loader": "^5.2.1", "html-webpack-plugin": "^3.2.0", "source-map-loader": "^0.2.4", "ts-loader": "^5.3.3", "typescript": "^3.2.4", "vue-class-component": "^6.3.2", "vue-loader": "^15.6.1", "vue-tsx-support": "^2.2.2", "webpack": "^4.29.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14"
  },"dependencies": { 
"vue": "^2.5.22", "vue-property-decorator": "^7.3.0"
  }...複製程式碼

webpack安裝時如有異常，使用官網推薦方法 yarn add webpack --dev

新增html入口檔案

有了編譯產出的js，還需要將js引入到頁面中，此時使用webpack plugins配置一個外掛 html-webpack-plugin ，就可以完成html頁面引入js的功能。

新增vue template 的編譯能力 vue-loader

引用vue官網：

執行時 + 編譯器 vs. 只包含執行時

如果你需要在客戶端編譯模板 (比如傳入一個字串給 template 選項，或掛載到一個元素上並以其 DOM 內部的 HTML 作為模板)，就將需要加上編譯器，即完整版：
// 需要編譯器new Vue({ 
template: '<
div>
{{ 
hi 
  }
  }<
/div>
'
  })// 不需要編譯器new Vue({ 
 render (h) { 
 return h('div', this.hi)  
  }
  })// 配置webpack.config.jsmodule.exports = { 
resolve: { 
  alias: { 
   'vue$': 'vue/dist/vue.esm.js'   
  }   
  }
  } 複製程式碼

新增一個可預覽的webServer webpack-dev-server

devServer: { 
  contentBase: '../dist',   port: 9000
  }複製程式碼

驗證結果

1.用TypeScript實現一個Input元件/example/vue-tsx/Input.tsx

  import {VNode
  } from 'vue/types';
  import Component from 'vue-class-component';
  import * as Vue from 'vue-tsx-support';
  import { 
Prop 
  } from 'vue-property-decorator';
  export interface InputProps   { 
  placeholder: String  
  }  @Component  export default class Input extends Vue.Component<
InputProps,any>
 { 
     [x: string]: any;
      text: any;
      input(e) { 
         this.text = e.target.value          this.$emit('input', e.target.value);
      
  }      @Prop([String, Boolean]) value: string | boolean | undefined;
        data() { 
       return { 
         text: ''        
  }      
  }                render() { 
         return <
input value={this.value
  } onInput={this.input
  }/>
         
  }  
  }複製程式碼

2.引用元件

  new Vue({ 
 template: '<
div>
元件<
Input value="" @input="input"/>
{{message
  }
  }<
/div>
 ',  data:{ 
     message:'hello Vue!'  
  },  methods:{ 
     input:function(e) { 
        this.message = e.target.value;
        
  }  
  }  
  }).$mount('#app');
複製程式碼

3.預覽

// 可以全量安裝一次專案依賴yarn installyarn start$ webpack-dev-server --config ./config/webpack.config.jsℹ ｢wds｣: Project is running at http://localhost:9000/ℹ ｢wds｣: webpack output is served from /ℹ ｢wds｣: Content not from webpack is served from ../distℹ ｢wdm｣: Hash: 9bf165f80a4d3c7600c0Version: webpack 4.29.0Time: 2129msBuilt at: 2019-01-26 19:49:49     Asset       Size  Chunks             Chunk Names./index.html  409 bytes          [emitted]   main.js    662 KiB    main  [emitted]  main  Entrypoint main = main.js  [0] multi (webpack)-dev-server/client?http://localhost:9000 ./example/index.ts 40 bytes {main
  } [built]  [./example/index.ts] 471 bytes {main
  } [built]  [./node_modules/ansi-html/index.js] 4.16 KiB {main
  } [built]  [./node_modules/ansi-regex/index.js] 135 bytes {main
  } [built]  [./node_modules/events/events.js] 13.3 KiB {main
  } [built]  [./node_modules/html-entities/index.js] 231 bytes {main
  } [built]  [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main
  } [built]  [./node_modules/strip-ansi/index.js] 161 bytes {main
  } [built]  [./node_modules/url/url.js] 22.8 KiB {main
  } [built]  [./node_modules/vue/dist/vue.esm.js] 289 KiB {main
  } [built]  [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 7.78 KiB {main
  } [built]  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main
  } [built]  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main
  } [built]  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main
  } [built]  [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main
  } [built]      + 15 hidden modules  Child html-webpack-plugin for "index.html":       1 asset      Entrypoint undefined = ./index.html      [./node_modules/html-webpack-plugin/lib/loader.js!./example/index.html] 618 bytes {0
  } [built]      [./node_modules/lodash/lodash.js] 527 KiB {0
  } [built]      [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0
  } [built]      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0
  } [built]  ℹ ｢wdm｣: Compiled successfully.複製程式碼