搭建webpack簡易腳手架

CharlesYu01發表於2019-01-26

Web

關鍵詞 vue typescript webpack

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

我會持續分享一些知識整理，如果文章對您有幫助記得點贊鼓勵一下哦?~，也可以通過郵件方式聯絡我

文章列表： juejin.im/user/5bc8b9…

郵箱地址: 595506910@qq.com

準備

已經掌握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.js
Hash: 067221c5690968574418
Version: webpack 4.29.0
Time: 86ms
Built at: 2019-01-26 14:05:49
  Asset       Size  Chunks             Chunk Names
main.js  930 bytes       0  [emitted]  main
Entrypoint 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.js
module.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 install

yarn 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: 9bf165f80a4d3c7600c0
Version: webpack 4.29.0
Time: 2129ms
Built 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.

複製程式碼

效果

示例程式碼：

github.com/CharlesYu01…

TODO:

後續增加更多webpack構建示例
基於vue cli3.0開發一套適合多種專案結構使用的外掛化vue腳手架（預計19年7月份）

Vue+webpack搭建自己的腳手架
2019-03-24
VueWeb
基於webpack4.X從零搭建React腳手架
2018-12-22
WebReact
手寫簡易webpack
2022-01-04
Web
webpack4配置vue腳手架
2019-04-14
WebVue
前端如何搭建一個簡單的腳手架
2019-03-18
前端
Vite 2.0 + React + TypeScript + Antd 搭建簡單腳手架
2022-01-05
ViteReactTypeScript
Gulp&Webpack搭建屬於自己的特性化前端腳手架
2018-02-05
Web前端
如何用vue搭建腳手架
2020-12-08
Vue
Vue-cli 腳手架搭建
2018-01-26
Vue
webpack+react+antd腳手架優化
2019-03-04
WebReact優化
快速配置 webpack 多入口腳手架
2018-12-27
Web
開箱即用的 Vue Webpack 腳手架模版
2018-06-01
VueWeb
webpack 配置react腳手架配置檔案
2017-03-08
WebReact
新手搭建簡潔的Express-React-Redux腳手架
2018-05-05
ExpressReactRedux
基於gulp+webpack 快速搭建的前端自動化腳手架
2017-12-12
Web前端
開箱即用的多頁面webpack腳手架
2019-03-04
Web
從零學腳手架(二)---初識webpack
2021-03-09
Web
看懂前端腳手架你需要這篇webpack
2017-01-05
前端Web
Dva手腳架搭建React專案
2020-06-17
React
react+typescript+antd腳手架搭建
2019-03-11
ReactTypeScript
使用腳手架搭建VUE專案
2018-08-07
Vue
TGDC | 搭建雲端遊戲的腳手架
2020-12-22
遊戲
搭建一個通用的腳手架
2018-02-02
基於React的腳手架搭建
2018-03-20
React
Vue2.0搭建腳手架流程
2018-04-30
Vue
從零開始搭建腳手架
2018-05-12
手寫一個簡易的Webpack
2019-05-07
Web
webpack4多頁面打包腳手架配置
2018-11-28
Web
「前端」看懂前端腳手架你需要這篇webpack
2017-03-14
前端Web
簡單vue專案腳手架
2019-02-16
Vue
Vue 框架-10-搭建腳手架 CLI
2018-11-15
Vue框架
用 Node 搭建最小實現腳手架
2022-04-13
不借助腳手架手動搭建react專案（webpack5 + Antd4 + React18）
2023-02-24
ReactWeb
從零學腳手架(七)---webpack-dev-server使用
2021-03-16
WebdevServer
前端如何搭建一個成熟的腳手架
2019-03-25
前端
一步一步搭建腳手架
2019-08-13
用腳手架搭建一個 vue 專案
2021-02-28
Vue
微信小程式--專案腳手架的搭建
2018-09-21
微信小程式