聲明：本次項目通過手寫webpack運行項目，適用於用所有框架的碼農（看到webpack不要害怕哇基礎級別的，筆不信可以看代碼呦~）
首先，新建一個文件夾 typescript（隨意命名啦~）並進入文件夾初始化文件
npm init -y //初始化文件生成一個 package.json文件
安裝typescript
npm i typescript -g
tsc -h //可以看到幫助指令
創建配置文件
tsc --init 創建配置文件
建立s r c文件夾,在s r c文件夾下建立index.ts文件並在文件中寫入如下代碼：
let hello : string = 'Hello World'
tsc ./src/index.ts.// 可通過該指令--編譯自動生成一個js 文件
配置構建工具：安裝三個包：
npm i webpack webpack-cli webpack-dev-server -D
安裝配置文件用到的插件
npm i ts-loader typescript -D //安裝 ts-loader依賴
npm i html-webpack-plugin -D //通過這個插件生成首頁，把頁面自動嵌入文件中
npm i clean-webpack-plugin -D //自動清空dist目錄
npm i webpack-merge -D //將文件合併的插件
建立一個build文件夾，裏面放入4個配置文件，代碼如下：
webpack.base.config.js（公共配置文件）
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
'app': './src/index.ts' //入口文件
},
output: {
filename: 'app.js' //輸出文件
},
resolve: {
extensions: ['.js','.ts', '.jsx'] //擴展名
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
}) //通過這個插件生成首頁，把頁面自動嵌入文件中
],
// optimization: {
// splitChunks: {
// chunks: 'all'
// }
// }
}
webpack.config.js
const merge = require('webpack-merge') //將兩個文件合併的插件
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig;
return merge(baseConfig, config);
};
webpack.dev.config.js (開發環境的配置)
module.exports = {
devtool: 'cheap-module-eval-source-map',
devServer: {
port: 8080
}
}
webpack.pro.config.js(生產環境的配置)
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin() //清空dist目錄
]
}
編寫HTML文件
由於在第一個配置文件中index.html文件路徑爲'./src/tpl/index.html'，所以在src文件夾下建立一個tpl文件夾，並且在tpl文件夾下建立一個index.html文件,並在body中放入一個class名爲app的div
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>typeScript</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
修改npm的腳本：打開package.json文件
"main": "./src/index.js",
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js",
//更改入口
//指定開發環境的腳本 指定配置文件爲webpack.config.js
//指定生產環境的腳本 指定配置文件爲webpack.config.js 會生成dist目錄
npm start 啓動項目（開發環境下） 發現服務已經運行 但是沒有文字
修改index.ts 嵌入文字
let hello : string = 'Hello World';
document.querySelectorAll('.app')[0].innerHTML = hello;
這個時候再打開頁面就會發現有hello world文字了呦~
如果想要運行生產環境，npm run build 發現生成一個dist文件夾，裏面構建好的app.js自動嵌入到了我們的模板文件index.html中
看完不要忘了點贊哇~✨
