TypeScript学习日志-第二十四天(webpack构建ts+vue3)

webpack构建ts+vue3

一、构建项目目录

如图:

shim.d.ts 这个文件用于让ts识别.vue后缀的 后续会说

并且给 tsconfig.json 增加配置项

javascript 复制代码
  "include": [
    "src/**/*"
  ]

二、基础构建

安装依赖

安装如下依赖:

javascript 复制代码
npm install webpack -D
npm install webpack-dev-server -D
npm install webpack-cli -D

修改 package.json 的启动服务和打包命名

javascript 复制代码
{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  }
}

编写 webpakc.config.js 配置文件

javascript 复制代码
const {Configuration} = require('webpack')
const path = require('node:path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const CssExtractPlugin = require('mini-css-extract-plugin')
/**
 * @type {Configuration}
 */
const config = {
    mode:'development',
    entry:'./src/main.ts', // 入口文件
    output:{
        path:path.resolve(__dirname,'dist'), //生成目录
        filename:'[chunkhash].js' ,//打包之后的文件
        clean:true //清空打包的结果
    },
    stats:'errors-only',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        }),
        new VueLoaderPlugin(),
        new CssExtractPlugin()
    ], //webpack的插件都是class 都需要new
    module:{
        rules:[
            {
                test:/\.ts$/,
                use:{
                    loader:'ts-loader', // 处理ts文件
                    options:{
                        appendTsSuffixTo:[/\.vue$/]
                    }
                }
            },
            {
                test:/\.vue$/,
                use:'vue-loader',
            },
            {
                test:/\.css$/,
                use:[CssExtractPlugin.loader,'css-loader'], //从右向左解析
            },
            {
                test:/\.less$/,
                use:[CssExtractPlugin.loader,'css-loader','less-loader'], //从右向左解析
            }
        ]
    },
    optimization:{
        splitChunks:{
            cacheGroups:{
                moment:{
                    name:'moment',
                     chunks:'all',
                     test:/[\\/]node_modules[\\/]moment[\\/]/
                },
                common:{
                    name:'common',
                    chunks:'all',
                    minChunks:2 //它的引用次数大于2个就会被分割出来
                }
            }
        }
    }
}

module.exports = config

这时候就能正常使用了

相关推荐
codehub9 小时前
TypeScript 高频面试题与核心知识总结
typescript
张志鹏PHP全栈10 小时前
TypeScript 第一天,认识TypeScript
typescript
羊八井15 小时前
类型、分类定义时使用 type 还是 kind ?
rust·typescript·代码规范
MR_发16 小时前
万字实现带@和表情包的输入框
vue.js·typescript
OEC小胖胖1 天前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
三水气象台1 天前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
難釋懷1 天前
TypeScript-webpack
javascript·webpack·typescript
摸鱼仙人~3 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔3 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE3 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript