手动搭建webpack5 + ts + vue3项目

第一步环境初始化

npm init -ynpm i webpack webpack-cli -Dnpm i webpack-dev-server -D

第二步创建config目录

在根目录下创建config文件夹，
在config中创建三个文件：
webpack.config.js 公共文件
webpack.development.js 开发环境下的配置
webpack.production.js 生产环境下配置

第三步创建测试 ts 文件，创建模板HTML

在根目录下创建src文件夹，在src下创建index.ts文件，如下
在根目录下创建public文件夹，在public下创建index.html文件，如下

// src/index.ts文件
const num: number = 10
console.log(num)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--public/index.html模板文件-->
</body>
</html>

结构如下：

第四步安装babel，修改配置文件

//安装babelnpm i babel-loader @babel/core @babel/preset-env @babel/preset-typescript -Dnpm i html-webpack-plugin -D

然后根目录下创建 .babelrc文件，内容如下：

{"presets": ["@babel/preset-env","@babel/preset-typescript"]
}

修改package.json 中的scripts

{..."scripts": {"dev": "webpack serve --config ./config/webpack.config.js"},...
}

第五步编辑 webpack.config.js

编辑config下的webpack.config.js文件，内容如下

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {entry: './src/index.ts',output:{path: resolve(__dirname, '../dist/')},module: {rules: [{test: /\.ts$/,use: ['babel-loader']}]},plugins:[new HtmlWebpackPlugin({template: './public/index.html'})],mode: 'development',devServer: {port: 8000,open: true,hot: true},
}

运行 npm run dev 看是否能运行。有报错莫慌，看看报什么错，处理报错在往下

第六步区分环境

区分环境

//minimist解析npm后面传递的参数
npm i minimist webpack-merge -D

修改 package.json

{..."scripts": {"dev": "webpack serve --config ./config/webpack.config.js --mode development","build": "webpack serve --config ./config/webpack.config.js --mode production"}...
}

修改webpack.config.js

const { resolve } = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const argv = require('minimist')(process.argv.slice(2));
console.log(argv)
const { mode } = argv
const config = require(`./webpack.${mode}`);
const baseConfig = {entry: './src/index.ts',output:{path: resolve(__dirname, '../dist/')},module: {rules: [{test: /\.ts$/,use: ['babel-loader']}]},plugins:[new HtmlWebpackPlugin({template: './public/index.html'})],mode
}module.exports = merge(baseConfig, config)

修改 webpack.development.js

module.exports = {devServer: {port: 8000,open: true,hot: true},
}

webpack.production.js改为

module.exports = {}

再次 npm run dev 测试

第七步配置vue

npm i vue@next vue-loader@next
npm i @vue/compiler-sfc -D

src下创建App.vue

<template><div id="App">App...</div>
</template>

挂载
修改src下的index.ts

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
app.mount('#root')

src下新创建shims-vue.d.ts文件

declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}declare module '*.png';

根目录下创建typescript配置文件 tsconfig.json

{"compilerOptions": {"target": "esnext","module": "esnext","moduleResolution": "node","strict": false,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"esModuleInterop": true,"lib": ["esnext", "dom"],},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]
}

//日志显示运行时间
npm install friendly-errors-webpack-plugin --save-dev

配置 webpack,development.js

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
module.exports = {devServer: {port: 8000,open: true,hot: true},plugins: [new FriendlyErrorsWebpackPlugin()]
}

//打包进度条
npm i webpackbar -D

webpack.config.js修改

const { resolve } = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const argv = require('minimist')(process.argv.slice(2));
console.log(argv)
const { mode } = argv
const config = require(`./webpack.${mode}`);
const WebpackBar = require('webpackbar')
const baseConfig = {entry: './src/index.ts',output:{path: resolve(__dirname, '../dist/')},cache: {type: 'filesystem'},module: {rules: [{test: /\.ts$/,use: ['babel-loader']},{test: /\.vue$/,use: ['vue-loader']}]},plugins:[new HtmlWebpackPlugin({template: './public/index.html'}),new VueLoaderPlugin(),new WebpackBar()],mode
}module.exports = merge(baseConfig, config)

npm run dev
到此结束
有问题评论区。。。