webpack搭建脚手架打包TypeScript代码

创建文件夹

目录结构: dabaots

初始化 npm init -y生成package.json文件

目录结构:
dabaots
dabaots / package.json

然后在开发环境中安装以下几个工具

npm i -D

webpack··························(打包代码的核心工具
webpack-cli·····················(webpack的命令行工具)
typescript ·······················(写ts所需的核心包)
ts-loader ·························(通过ts-loader可以对webpack和ts进行整合)
html-webpack-plugin … (是自动生成html的一个webpack插件)
webpack-dev-server … (无需刷新更新页面)
clean-webpack-plugin … ( 每次打包上线之前都会自动清空dist内的文件如何重新生成最新的文件)
"@babel/core" “@babel/preset-env” babel-loader core-js(安装babel转换,你是什么环境他就会转成什么代码)

可能会遇到的小问题:这里可能会出现的问题就是你下载的依赖包webpack-dev-server版本如果和谷歌的不适配,建议将插件版本改低一点或者谷歌浏览器升级成最新版本否则会出现错误Cannot GET /chrome.exe

接下来创建webpack.config.js进行配置

目录结构:
dabaots
dabaots / package.json
dabaots / webpack.config.js

// 引入一个包
const path = require("path")

//引入自动生成html的包
const HtmlWebpackPlugin = require("html-webpack-plugin")

//引入更新dist文件的插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都应该写入moudle.exports中
module.exports={
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,"dist"),
        // 指定打包后文件的文件
        filename:"bundle.js",
        //编译的时候不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },

    //webpack打包时要使用到module这个模块
    module:{
        // 指定要加载的规则
        rules:[{
            // test指定的是规则生效的文件
            test:/\.ts$/,
            // use是要使用的loader
            //配置babel
            use:[
                {//指定加载器
                    loader:"babel-loader",
                    options:{
                        //设置预定义环境
                        presets:[
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                //配置信息
                                {
                                    //要兼容的浏览器
                                    targets:{
                                        "chrome":"88"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    //表示按需加载
                                    "useBuiltIns":"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            //设置不被打包上传的文件
            exclude:["/node_modules/"]
        }]
    },

    // 配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            // 自定义html模板地址
            template:"./src/index.html"
        }),
        //每次打包上线之前都会自动清空dist内的文件如何重新生成最新的文件
        new CleanWebpackPlugin()
    ],

    resolve:{
        //解决在ts文件内部单独引入其他ts包时候报错的问题
        extensions:['.ts','.js']
    }
}

最后在package.json中写入打包及运行等脚本

在终端npm run build 打包运行即可

打包成功后会自动生成一个dist文件

npm run start 自动打开谷歌浏览器且内容为热更新的

到此这篇关于webpack搭建脚手架打包TypeScript代码的文章就介绍到这了,更多相关webpack打包TypeScript代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 教你使用webpack打包编译TypeScript代码

    TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac

  • webpack搭建脚手架打包TypeScript代码

    创建文件夹 目录结构: dabaots 初始化 npm init -y生成package.json文件 目录结构: dabaots dabaots / package.json 然后在开发环境中安装以下几个工具 npm i -D webpack··························(打包代码的核心工具 webpack-cli·····················(webpack的命令行工具) typescript ·······················(写ts所需的核心

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • 使用webpack搭建vue项目实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

  • 使用webpack打包ts代码的实现

    目录 使用 webpack 打包 生成 package.json 安装 cnpm 安装 webpack 相关 编写 webpack 配置文件 创建 tsconfig.json 修改 package.json 使用webpack打包 安装插件 html-webpack-plugin webpack-dev-server clear-webpack-plugin babel 模块问题 使用 webpack 打包 生成 package.json 本质上,webpack 是一个用于现代 JavaScri

  • 使用webpack搭建vue项目及注意事项

    有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • 详解基于webpack搭建react运行环境

    最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack

  • 手动用webpack搭建第一个ReactApp的示例

    学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境. npm install -g create-react-app create-react-app my-app cd my-app npm start 使用淘宝 NPM 镜像 使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想. 使用淘宝镜像安装 npm 包只需要两步即可: 安装 cnpm n

  • 使用webpack搭建react开发环境的方法

    1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新

随机推荐