devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第二十章 TypeScript（webpack构建ts+vue3项目）

作者：羊村懒王 | 2024-03-25 16:21:29

赞

踩

第二十章 TypeScript（webpack构建ts+vue3项目）

构建项目目录

  • src
  • -- main.ts
  • -- App.vue
  • --shim.d.ts
  • webpack.config.js
  • index.html
  • package.json
  • tsconfig.json

基础构建 

  1. npm install webpack -D
  2. npm install webpack-dev-server -D
  3. npm install webpack-cli -D

package.json 添加打包命令和 启动服务的命令

  1. {
  2.   "scripts": {
  3.     "build": "webpack",
  4.     "dev": "webpack-dev-server"
  5.   }
  6. }

编写webpack.config.js 配置文件测试打包

  1. const { Configuration } = require('webpack')
  2. const path  = require('path')
  3. /**
  4.  * @type {Configuration}
  5.  */
  6. const config = {
  7.     mode:"development", //开发模式
  8.     entry:'./src/main.ts', //入口
  9.     output:{
  10.         path: path.resolve(__dirname, 'dist'), //出口目录
  11.         filename: 'main.js', //出口文件
  12.     }
  13. }
  14.  
  15. module.exports = config

tsconfig.json 增加配置项

  1.   "include": [
  2.     "src/**/*"
  3.   ]

运行npm run build 打包成功

支持TypeScript 

增加依赖

  1. npm install ts-loader -D
  2. npm install typescript -D
  1. const { Configuration } = require('webpack')
  2. const path = require('path')
  3. /**
  4.  * @type {Configuration}
  5.  */
  6. const config = {
  7.     mode: "development",
  8.     entry: './src/main.ts',
  9.     output: {
  10.         path: path.resolve(__dirname, 'dist'),
  11.         filename: 'main.js',
  12.     },
  13.     module: {
  14.         rules: [
  15.             {
  16.                 test: /\.ts$/,
  17.                 use: 'ts-loader' //支持解析ts文件
  18.             }
  19.         ]
  20.     }
  21. }
  22.  
  23. module.exports = config

支持vue

安装依赖

  1. npm install vue-laoder -D
  2. npm install html-webpack-plugin -D

main.ts 引入Vue

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. createApp(App).mount('#app')

让ts识别.vue后缀

  1. declare module "*.vue" {
  2.     import { DefineComponent } from "vue"
  3.     const component: DefineComponent<{}, {}, any>
  4.     export default component
  5. }

初始化index.html 模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div id="app"></div>
  10. </body>
  11. </html>

增加vue-loader 和 插件

  1. const { Configuration } = require('webpack')
  2. const { VueLoaderPlugin } = require('vue-loader')
  3. const HtmlWepackPlugin = require('html-webpack-plugin')
  4. const path = require('path')
  5. /**
  6.  * @type {Configuration}
  7.  */
  8. const config = {
  9.     mode: "development",
  10.     entry: './src/main.ts',
  11.     output: {
  12.         path: path.resolve(__dirname, 'dist'),
  13.         filename: 'main.js',
  14.     },
  15.     stats: 'errors-only',
  16.     plugins: [
  17.         new VueLoaderPlugin(),
  18.         new HtmlWepackPlugin({
  19.             template: './index.html'
  20.         })
  21.     ],
  22.     module: {
  23.         rules: [
  24.             {
  25.                 test: /\.ts$/,
  26.                 use:{
  27.                     loader: 'ts-loader',
  28.                     options:{
  29.                         appendTsSuffixTo: [/\.vue$/]
  30.                     }
  31.                 }
  32.             },
  33.             {
  34.                 test: /\.vue$/,
  35.                 use: 'vue-loader'
  36.             }
  37.         ]
  38.     }
  39. }
  40.  
  41. module.exports = config

支持css + less

安装依赖

npm install css-loader style-loader less less-loader -D
  1. const { Configuration } = require('webpack')
  2. const { VueLoaderPlugin } = require('vue-loader')
  3. const HtmlWepackPlugin = require('html-webpack-plugin')
  4. const path = require('path')
  5. /**
  6.  * @type {Configuration}
  7.  */
  8. const config = {
  9.     mode: "development",
  10.     entry: './src/main.ts',
  11.     output: {
  12.         path: path.resolve(__dirname, 'dist'),
  13.         filename: 'main.js',
  14.     },
  15.     stats: 'errors-only',
  16.     plugins: [
  17.         new VueLoaderPlugin(),
  18.         new HtmlWepackPlugin({
  19.             template: './index.html'
  20.         })
  21.     ],
  22.     module: {
  23.         rules: [
  24.             {
  25.                 test: /\.ts$/,
  26.                 use:{
  27.                     loader: 'ts-loader',
  28.                     options:{
  29.                         appendTsSuffixTo: [/\.vue$/]
  30.                     }
  31.                 }
  32.             },
  33.             {
  34.                 test: /\.vue$/,
  35.                 use: 'vue-loader'
  36.             },
  37.             {
  38.                 test: /\.css$/,
  39.                 use: ['style-loader', 'css-loader'] //从右向左解析
  40.             },
  41.             {
  42.                 test: /\.less$/,
  43.                 use: ['style-loader', 'css-loader', 'less-loader']
  44.             }
  45.         ]
  46.     }
  47. }
  48.  
  49. module.exports = config

代码分包

性能优化 默认把所有代码打包到一个js文件体积太大了我们可以进行代码分包减少体积

  1. const { Configuration } = require('webpack')
  2. const { VueLoaderPlugin } = require('vue-loader')
  3. const HtmlWepackPlugin = require('html-webpack-plugin')
  4. const path = require('path')
  5. /**
  6.  * @type {Configuration}
  7.  */
  8. const config = {
  9.     mode: "development",
  10.     entry: './src/main.ts',
  11.     output: {
  12.         path: path.resolve(__dirname, 'dist'),
  13.         filename: '[chunkhash].js',
  14.         clean: true
  15.     },
  16.     stats: 'errors-only',
  17.     plugins: [
  18.         new VueLoaderPlugin(),
  19.         new HtmlWepackPlugin({
  20.             template: './index.html'
  21.         })
  22.     ],
  23.     optimization: {
  24.         splitChunks: {
  25.             cacheGroups: {
  26.                 moment: {
  27.                     name: "moment",
  28.                     test: /[\\/]node_modules[\\/]moment[\\/]/,
  29.                     chunks: "all"
  30.                 },
  31.                 common:{
  32.                     name: "common",
  33.                     chunks: "all",
  34.                     minChunks: 2
  35.                 }
  36.             }
  37.         }
  38.     },
  39.     module: {
  40.         rules: [
  41.             {
  42.                 test: /\.ts$/,
  43.                 use: {
  44.                     loader: 'ts-loader',
  45.                     options: {
  46.                         appendTsSuffixTo: [/\.vue$/]
  47.                     }
  48.                 }
  49.             },
  50.             {
  51.                 test: /\.vue$/,
  52.                 use: 'vue-loader'
  53.             },
  54.             {
  55.                 test: /\.css$/,
  56.                 use: ['style-loader', 'css-loader'] //从右向左解析
  57.             },
  58.             {
  59.                 test: /\.less$/,
  60.                 use: ['style-loader', 'css-loader', 'less-loader']
  61.             }
  62.         ]
  63.     }
  64. }
  65.  
  66. module.exports = config

单独提取css

目前是通过js动态插入style标签的方式进行的，但是我们希望通过link标签引入

安装依赖

npm install mini-css-extract-plugin -D
  1. const { Configuration } = require('webpack')
  2. const { VueLoaderPlugin } = require('vue-loader')
  3. const HtmlWepackPlugin = require('html-webpack-plugin')
  4. const MimiCssExtractPlugin = require('mini-css-extract-plugin')
  5. const path = require('path')
  6. /**
  7.  * @type {Configuration}
  8.  */
  9. const config = {
  10.     mode: "development",
  11.     entry: './src/main.ts',
  12.     output: {
  13.         path: path.resolve(__dirname, 'dist'),
  14.         filename: '[chunkhash].js',
  15.         clean: true
  16.     },
  17.     stats: 'errors-only',
  18.     plugins: [
  19.         new VueLoaderPlugin(),
  20.         new HtmlWepackPlugin({
  21.             template: './index.html'
  22.         }),
  23.         new MimiCssExtractPlugin()
  24.     ],
  25.     optimization: {
  26.         splitChunks: {
  27.             cacheGroups: {
  28.                 moment: {
  29.                     name: "moment",
  30.                     test: /[\\/]node_modules[\\/]moment[\\/]/,
  31.                     chunks: "all"
  32.                 },
  33.                 common:{
  34.                     name: "common",
  35.                     chunks: "all",
  36.                     minChunks: 2
  37.                 }
  38.             }
  39.         }
  40.     },
  41.     module: {
  42.         rules: [
  43.             {
  44.                 test: /\.ts$/,
  45.                 use: {
  46.                     loader: 'ts-loader',
  47.                     options: {
  48.                         appendTsSuffixTo: [/\.vue$/]
  49.                     }
  50.                 }
  51.             },
  52.             {
  53.                 test: /\.vue$/,
  54.                 use: 'vue-loader'
  55.             },
  56.             {
  57.                 test: /\.css$/,
  58.                 use: [MimiCssExtractPlugin.loader, 'css-loader'] //从右向左解析
  59.             },
  60.             {
  61.                 test: /\.less$/,
  62.                 use: [MimiCssExtractPlugin.loader, 'css-loader', 'less-loader']
  63.             }
  64.         ]
  65.     }
  66. }
  67.  
  68. module.exports = config

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/311075
推荐阅读