使用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 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。在我们的项目中要使用 webpack 首先应该初始化,生成的默认的 package.json,执行 npm init -y 后会在项目根目录下生成 package.json(其中 -y 是直接略过所有问答,直接都 yes)

安装 cnpm

接下来需要安装 webpack 所需依赖,我们可以使用 npm 或 cnpm 安装。这里说点题外话。npm 作为包管理器,由于服务器不在国内所以有的时候速度会慢一点,所以我们来安装淘宝团队的 cnpm,这个就是 npm 在国内的镜像,执行以下命令来安装 cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

使用 cnpm -v来检查是否安装成功

安装 webpack 相关

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

i 是 install 的简写
-D 表示安装到开发环境,也就是安装并将依赖信息写在 package.json 中的 devDependencies中,等同于 --save-dev
webpack 安装打包工具的核心代码
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必须安装这个才能让 ts 在 webpack 中使用

执行命令后,查看 package.json,多了 devDependencies 节点,说明安装成功啦

编写 webpack 配置文件

新建一个 webpack.config.js 文件到根目录

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

//webpack 中的所有配置都应该写在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包时使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test 指定规则生效的文件,以下匹配以 ts 结尾的文件
                test:/\.ts$/,
                //要使用的loader,用 ts-loader 处理以 ts 结尾的文件
                use: 'ts-loader',
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    }
};

创建 tsconfig.json

上节我们已经讲了,先写这些:

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

修改 package.json

 "build": "webpack"

增加位置如下:

使用webpack打包

命令:npm run build

在 webpack.config.js 中我们指定了入口文件为 index.ts,我们在里边随便编写一些内容

index.ts

function sum(a:number,b:number):number{
    return a+b;
}

console.log(sum(11,22));

在 webpack.config.js 中我们指定了打包文件的目录为 dist,打包后的文件名是 bundle.js,所以执行命令npm run build后就使用 webpack 进行了打包,结果如下:

到此为止,我们就实现了最简单的使用 webpack 打包的功能

安装插件

html-webpack-plugin

① 安装插件
执行 cnpm i -D html-webpack-plugin
html-webpack-plugin 帮助我们自动生成 html 文件

② 引入插件
webpack.config.js 中引入插件

//引入一个包
......
//引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin")

//webpack 中的所有配置都应该写在 module.exports 中
module.exports = {
    ......

    //配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(),
    ]
};

③打包
先执行 npm run build

这样目录下就生成了 html 文件

我们可以自定义标题或其他一些内容

	//配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            title: "自定义标题"
        }),
    ]

还可以设置一个网页模板,我们可以在 src 下新建一个 index.html 做为模板

然后在 webpack.config.js 中将其设置为模板

	plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        }),
    ]

再次运行 npm run build 生成的网页就是根据刚才写好的模板生成的

webpack-dev-server

①、执行cnpm i -D webpack-dev-server
②、在 pages.json 中 scripts 节点下增加 "start": "webpack serve --open"

意思是启动 webpack 服务器,这样我们刚才生成的 html 会用默认浏览器打开

③、运行
直接点击上边截图的运行三角形,或者执行 npm start

如果报错 The mode option has not been set......

解决办法
在 webpack.config.js 中根节点下增加 mode: 'development'

(如果还处在上次命令,可以按 ctrl+c 终止命令)再次执行 npm start 即可打开默认浏览器

这个网页是实时更新的,我们修改 index.ts ,多输出一行文字,右侧浏览器也会自动输出

clear-webpack-plugin

这个插件的作用是每次编译会先清空编译文件夹下的文件,再生成,这样就保证了都是最新文件

①、安装

cnpm i -D clean-webpack-plugin

②、引入、配置

//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

 //配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        ......
    ],

babel

babel 用来解决兼容性问题

①、安装

cnpm i -D @babel/core @babel/preset-env babel-loader core-js

②、配置
修改 webpack.config.js

......

//webpack 中的所有配置都应该写在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目录
    output: {
        ......
        //告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包时使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test 指定规则生效的文件,以下匹配以 ts 结尾的文件
                test:/\.ts$/,
                //要使用的loader,用 ts-loader 处理以 ts 结尾的文件
                use: [
                    //配置babel
                    {
                        //指定加载器
                        loader:'babel-loader',
                        //设置 babel
                        options: {
                            //设置预定义的环境
                            presets:[
                                //指定环境插件
                                '@babel/preset-env',
                                //配置信息
                                {
                                    //要兼容的目标浏览器
                                    targets:{
                                        "chrome":88
                                    },
                                    //指定corejs版本
                                    "corejs":"3",
                                    //使用corejs的方式 usage表示按需加载
                                    "useBuiltIns":"usage",
                                }
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    ......
};

加载器的顺序是从后往前执行,所以先用 ts-loader 将 ts 转为 js,然后使用 babel-loader 将新版本的 js 转换为 旧版本的 js

模块问题

新建 m1.ts 暴露一个 hi

index.ts 中引入 m1 并打印 hi

执行 npm run build 会报错:

这时我们需要修改 webpack.config.js 中配置,增加

 resolve: {
        extensions: ['.ts','.js']
    }

Resolve 配置 webpack 如何寻找模块对应的文件,在导入语句没带文件后缀时,webpack 会自动带上后缀去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表

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

(0)

相关推荐

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

  • 详解如何使用webpack打包Vue工程

    使用webpack打包Vue工程 前言 入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了.感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现.大神们疯狂的造轮子,玩的不亦乐乎.我等小白们,疯狂追赶,学的心肝脾肺都快衰竭.而我的精力也仅限浅尝辄止,但是学多一点总有好处的.本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出

  • 详解webpack分离css单独打包

    这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一.extract-text-webpack-plugin 使用方法 这个操作很简单的,只需要一个插件就好了,就是e

  • webpack打包js的方法

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 在代码实践之前,先说一写webpack的基础知识. 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能

  • 详解webpack 多页面/入口支持&公共组件单独打包

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • webpack 打包压缩js和css的方法示例

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse      

  • webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • 详解用webpack把我们的业务模块分开打包的方法

    webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记 如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,

  • 使用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搭建脚手架打包TypeScript代码

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

  • 教你使用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打包多页面的方法

    前言 一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的.刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会事半功倍呢?好在众多优秀的前端开发者已经写了许多demo和文章供人学习.我也写了一个小项目,希望对大家学习webpack有帮助. 好吧其实上面说的都是废话,接下来附上项目地址和干货,配合食用更佳. webpack-multi

  • 详解如何用webpack打包一个网站应用项目

    本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下 随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应

  • Webpack打包慢问题的完美解决方法

    前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们

  • webpack打包单页面如何引用的js

    目录结构如下图所示: webpack打包代码如下: var webpack = require('webpack'); var fs = require('fs'); var path = require('path'); var fse = require('fs-extra'); const debug = process.env.NODE_ENV !== 'production'; function entries(jsPath) { var dirnames = fs.readdirSy

  • 解决webpack打包速度慢的解决办法汇总

    刚开始用webpack,谈一谈解决webpack打包慢的问题的方法 技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用.其实这是错误的使用方式. 正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍. 技巧2 webpac

  • 详解vue-cli快速构建vue应用并实现webpack打包

    Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档很全面的. Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可. 一.什么是vue-cli vue-cli是由

随机推荐