初始化
我使用pnpm来安装依赖,优点就不多赘述了
思考vue3 + typescrpit 需要哪些依赖:
- webpack、typescript、vue
- sass
- loader
- plugin
- eslint、prettier等等
"devDependencies": {
"@commitlint/cli": "^17.4.4",
"@commitlint/config-conventional": "^17.4.4",
"@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.54.0",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"commitizen": "^4.3.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^7.0.0",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.6.0",
"eslint-define-config": "^1.15.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jsx": "^0.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.7.1",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.3",
"jest": "^29.4.3",
"lint-staged": "^13.1.2",
"prettier": "^2.8.4",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",
"unplugin-auto-import": "^0.15.0",
"vue-loader": "^17.0.1",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1",
"webpackbar": "^5.0.2"
},
"dependencies": {
"vue": "^3.2.47"
},
目录
vue3-webpack-demo
├── commitlint.config.js
├── config
│ └── webpack.config.js //webpack配置文件
├── package.json
├── pnpm-lock.yaml
├── prettier.config.js
├── src
│ ├── assets //图标、css
│ │ ├── images
│ │ └── style
│ ├── background //Service Workers中运行的程序
│ │ └── index.ts
│ ├── content
│ │ └── index.ts //目标页面中执行的JS
│ ├── popup //弹出层
│ │ ├── components
│ │ ├── index.html
│ │ └── main.ts
│ ├── public //manifest V3配置文件
│ │ └── manifest.json
│ ├── types // ts类型
│ │ ├── auto-imports.d.ts
│ │ └── global.d.ts
│ └── utils
│ └── hotReload.js
└── tsconfig.json
webpack配置文件
webpack.config.js这里我理解不需要区分环境,因为插件最终加载的是dist目录(个人理解)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const AutoImportPlugin = require('unplugin-auto-import/webpack');
// 分析打包后的依赖包大小
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// 打包进度美化
const WebpackBar = require('webpackbar');
const path = require('path');
module.exports = [
{
//去除build生成的详细说明
stats: 'minimal',
// 环境
mode: 'production',
//入口文件
entry: {
popup: './src/popup/main.ts',
},
//输出
output: {
//输出地址
path: path.resolve(__dirname, '../dist'),
//输出文件名
filename: 'js/[name].js',
},
plugins: [
/* 用于自动引入vue相关api
例如: 在.vue文件中
<script setup lang="ts">
const name = ref<string>('hzw')
</script>
不需要引入ref可以直接使用
*/
AutoImportPlugin({
imports: ['vue'],
dts: './src/types/auto-imports.d.ts',
}),
// 生成dist目录中的 popup.html
new HtmlWebpackPlugin({
template: './src/popup/index.html',
filename: 'popup.html',
}),
// manifest V3 配置和assets 直接复制到dist中,不需要编译
new CopyWebpackPlugin({
patterns: [
{ from: './src/public/manifest.json', to: '../dist' },
{ from: './src/assets', to: '../dist/assets' },
],
}),
// vue loader
new VueLoaderPlugin(),
// 分析打包文件大小,用于优化
// new BundleAnalyzerPlugin(),
// 打包进度条美化
new WebpackBar({
name: 'vue3-webpack-demo',
color: '#85d', // 默认green，进度条颜色支持HEX
profile: true,
}),
],
module: {
// 这里不做赘述了
rules: [
{
test: /\.css$/i,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
exclude: '/node-modules/',
},
],
},
},
{
//将content和background编译后输出到dist中
stats: 'none',
mode: 'production',
entry: {
content: './src/content/index.ts',
background: './src/background/index.ts',
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
},
},
];
开发
- 开发通过pnpm watch 会监听文件发生改变自动编译
"scripts": {
//
"watch": "webpack watch --config ./config/webpack.config.js",
},
- 将生成的dist文件通过
加载已解压的拓展程序添加到拓展里
