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

这时候就能正常使用了

相关推荐
鲸鱼146665707541916 小时前
Screeps TypeScript 教程:使用 tsup 解决模块加载问题并实现自动化部署
typescript
张志鹏PHP全栈1 天前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
Toomey2 天前
别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势
typescript
郑板桥302 天前
ts学习1
学习·typescript
前端拿破轮2 天前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手2 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈2 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript
成遇3 天前
Eslint基础使用
javascript·typescript·es6
张志鹏PHP全栈3 天前
TypeScript 第二天,TypeScript中的类型(一)
typescript
極光未晚3 天前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript