配置webpack打包vue和typescript
webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');
const { DefinePlugin } = require('webpack');
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const workers = require('os').cpus().length;
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
main: "./src/main.ts",
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "js/[contenthash:10]-[name].js",
chunkFilename: 'js/[chunkhash:10].js',
// assetModuleFilename:"public/media/[hash:10][ext]",
clean: true,
},
mode: process.env.NODE_ENV,
devServer: {
port: 8080,
hot: true,
// open: true,
historyApiFallback: true,
proxy: {}
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html"
}),
!isDevelopment && new MiniCssExtractPlugin({
filename: 'css/[contenthash:10]-[name].css',
chunkFilename: '[chunkhash].css',
}),
new ESLintPlugin({
exclude: "node_modules",
context: path.resolve(__dirname, './src'),
cache: true,
cacheLocation: path.resolve(__dirname, "./node_modules/.cache/eslintcache")
}),
new VueLoaderPlugin(),
new DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false
}),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass"
})],
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: "sass"
})],
}),
// !isDevelopment && new CopyPlugin({
// patterns: [
// { from: "./src/favicon.ico", to: "./favicon.ico" },
// ],
// }),
].filter(Boolean),
optimization: {
minimize: isDevelopment ? false : true,
minimizer: [
new CssMinimizerPlugin(),
// new TerserPlugin({
// parallel: workers, //启用多进程打包
// })
],
splitChunks: {
chunks: 'all',
cacheGroups: {
vue: {
test: /[\\/]node_modules[\\/]vue(.*)?[\\/]/,
name: "vue-chunk",
priority: 40,
},
ElementPlus: {
test: /[\\/]node_modules[\\/]element-plus(.*)?[\\/]/,
name: "ElementPlus-chunk",
priority: 30,
},
libs: {
test: /[\\/]node_modules[\\/]/,
name: "libs-chunk",
priority: 20,
}
}
},
},
resolve: {
extensions: [".vue", ".ts", ".js"],
extensionAlias: {
"@": path.resolve(__dirname, "src"),
}
},
devtool: isDevelopment ? "cheap-module-source-map" : "source-map",//生成map文件用于定位错误
performance: false,
module: {
rules: [
{
test: /\.vue$/i,
loader: "vue-loader",
options: {// 设置缓存
cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/vue-loader')
}
},
{
test: /\.css$/i,
use: [...CssProcess()]
},
{
test: /\.less$/i,
use: [...CssProcess("less-loader")],
},
{
test: /\.s[ac]ss$/i,
use: [...CssProcess("sass-loader")],
},
{
test: /.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024//小于10kb将图片转换为base64,减少请求数量
}
},
generator: {
filename: 'public/imgs/[contenthash:10]-[name][ext]'
}
},
{
test: /\.html$/i,
loader: "html-loader"
},
{
test: /\.(eot|ttf|woff|woff2|svg|mp3|mp4|avi)$/,
type: "asset/resource",
generator: {
filename: "public/media"
}
},
{
test: /\.([cm]?ts|js)$/,
exclude: /(node_modules|bower_components)/,
use: [
// {
// loader: "thread-loader",
// options: {
// workers,
// workerParallelJobs: 50,
// workerNodeArgs: ['--max-old-space-size=1024'],
// poolRespawn: false,
// poolTimeout: 2000,
// poolParallelJobs: 200,
// name: "my-pool"
// },
// },
{
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启缓存
cacheCompression: false, // 关闭压缩
},
},
// {
// loader: "ts-loader",
// options: {
// appendTsSuffixTo: [/\.vue$/]
// }
// },
]
},
],
}
}
function CssProcess(type) {
return [
isDevelopment ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
['postcss-preset-env'],
],
},
},
},
type
].filter(Boolean);
}
babel.config.js
module.exports = {
presets: [
"@vue/cli-plugin-babel/preset",
[
'@babel/preset-env',
{
corejs: 3,
useBuiltIns: 'usage',
modules: false
}
],
[
'@babel/preset-typescript',
]
],
plugins: [
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
["@babel/plugin-transform-typescript", { "loose": true }]
]
}eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
parserOptions: {
parser: "@babel/eslint-parser"
}
}tsconfig.json
{
"compilerOptions": {
"target": "ES2016",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": false
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/components/Home/.vue.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
}
}
package.json
{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "./src/index.ts",
"scripts": {
"dev": "cross-env NODE_ENV=\"development\" webpack-dev-server",
"build": "cross-env NODE_ENV=\"production\" npx webpack --config ./webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/eslint-parser": "^7.19.1",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-syntax-typescript": "^7.20.0",
"@babel/plugin-transform-runtime": "^7.21.0",
"@babel/plugin-transform-typescript": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-router-dom": "^5.3.3",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/preload-webpack-plugin": "^2.0.0",
"babel-loader": "^9.1.2",
"babel-preset-react-app": "^10.0.1",
"copy-webpack-plugin": "^11.0.0",
"core-js": "^3.29.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-vue": "^9.9.0",
"eslint-webpack-plugin": "^4.0.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"mini-css-extract-plugin": "^2.7.2",
"postcss": "^8.4.21",
"postcss-loader": "^7.0.2",
"postcss-preset-env": "^8.0.1",
"react-refresh": "^0.14.0",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"thread-loader": "^3.0.4",
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",
"unplugin-auto-import": "^0.15.1",
"unplugin-vue-components": "^0.24.1",
"url-loader": "^4.1.1",
"vue-loader": "^17.0.1",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"workbox-webpack-plugin": "^6.5.4"
},
"browserslist": [
"last 6 version",
"> 1%",
"not dead"
],
"dependencies": {
"element-plus": "^2.2.36",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
}
}