搭建webpack簡易腳手架

typescriptwebpack

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

1.閱讀webpack官網文件

webpack工作原理

2.閱讀typescript官網文件

腳手架搭建了解輔導教程部分

3.閱讀vue官網文件

vue配置入門:

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

配置檔案

完成準備工作後下面就要進行這3類檔案的配置

配置思路，漸進式配置避免過程中問題堆積，先讓腳手架工作起來

讓webpack執行起來

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

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

webpack配置檔案:

/**

* @file ./config/webpack.config.js
* @author charlesyu01
*/module.exports = ;

$  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 [built]

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

用vue+ts編寫乙個可瀏覽的頁面

// package.json 

// todo: 掌握各外掛程式的作用
..."devdependencies": ,
"dependencies": 
...

new vue(}'})

// 不需要編譯器

new vue(

})// 配置webpack.config.js

module.exports = }

}

1.用typescript實現乙個input元件

/example/vue-tsx/input.tsx

import  from 'vue/types';

import component from 'vue-class-component';
import * as vue from 'vue-tsx-support';
import from 'vue-property-decorator';
export inte***ce inputprops 
@component
export default class input extends vue.component
@prop([string, boolean]) value: string | boolean | undefined;
data() 
}render() 
}

new vue(}

', data:,
methods:
}

// 可以全量安裝一次專案依賴

後續增加更多webpack構建示例
基於vue cli3.0開發一套適合多種專案結構使用的外掛程式化vue腳手架 （預計19年7月份）
 
用webpack手動搭建react腳手架
1.npm i webpack webpack cli webpack dev server react react dom d 2.npm i babel loader 7 babel core babel preset es2015 babel preset react d3.在安裝完成後需要在...
搭建Vue腳手架
從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴，走你 cd my project npm install npm r...
搭建vue cli腳手架
前期工作準備 2.安裝 映象，因為我們用的npm的伺服器是外國，有的時候我們安裝 依賴 的時候會超級慢，所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後，就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack，...