Webpack整合TypeScript

简介: Webpack整合TypeScript

一、初始化项目

npm init -y

二、下载构建工具

npm  i -D webpack webpack-cli typescript ts-loader

三、创建webpack.config.js

项目根目录创建src文件夹,创建入口空文件index.ts

//引入一个包
const path = require('path');
 
// webpack中所有配置信息写在module.exports
module.exports = {
    // 开发配置
    mode: 'development',
// 指定入口文件
    entry: "./src/index.ts",
//  指定打包文件所在目录
    output: {
        // 指定打包文件所在目录
        // path: "./dist"
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名称
        filename: "bundle.js"
    },
// 指定webpack打包时要使用模块
    module: {
        //     指定要加载的规则
        rules: [
            {
                // test指定规则生成文件
                test: /\.tx$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    }
}


四、创建tsconfig.json

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6",
    "strict": true
  }
}

五、修改package.json

"build":"webpack"

六、测试命令

npm run build

七、配置html插件、代码热刷新插件、编译清除插件、babel

npm i -D html-webpack-plugin
npm i -D webpack-dev-server
npm i -D clean-webpack-plugin
npm i -D @babel/core @babel/preset-env babel-loader core-js


修改webpack.config.js

//引入一个包
const path = require('path');
//     引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// webpack中所有配置信息写在module.exports
module.exports = {
    // 开发配置
    mode: 'development',
 
// 指定入口文件
    entry: "./src/index.ts",
//  指定打包文件所在目录
    output: {
        // 指定打包文件所在目录
        // path: "./dist"
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名称
        filename: "bundle.js",
        //     不适用webpack箭头函数
        environment: {
            arrowFunction: false
        }
 
    },
// 指定webpack打包时要使用模块
    module: {
        //     指定要加载的规则
        rules: [
            {
                // test指定规则生成文件
                test: /\.tx$/,
                // 要使用的loader,加载顺序,数组倒序
                use: [
                    {
                        //     指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            preset: [
                                "@babel/prest-env",
                                //     配置信息
                                {
                                    // 要兼容目标浏览器
                                    targets: {
                                        "chrome": "88"
                                    },
                                    // corejs版本
                                    "corejs": "3",
                                    //     使用corejs的方式“usage" 表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ],
                        }
                    },
                    'ts-loader',
                ],
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins: [
        // html插件
        new HTMLWebpackPlugin({
            // 定义网页标题
            // title: "title"
            // 定义生成模板
            template: "./src/index.html"
        }),
        //     clean插件
        new CleanWebpackPlugin()
 
    ],
    // 设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

修改package.json

 

"start": "webpack serve --open"

相关文章
|
缓存 JSON 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 7
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
609 0
|
缓存 JavaScript 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 2
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
400 0
|
13天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
5月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
77 0
|
6月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
85 0
|
6月前
|
域名解析 JavaScript 前端开发
TypeScript笔记(3)—— 使用WebPack工具
TypeScript笔记(3)—— 使用WebPack工具
56 0
|
缓存 前端开发 JavaScript
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 5
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
182 1
|
Web App开发 移动开发 缓存
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 6
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
372 0
|
数据采集 前端开发 JavaScript
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 4
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
183 0
|
存储 JavaScript 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 3
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
173 0