webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y
cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合)
2.1 自动生成html文件
cnpm i -D html-webpack-plugin
2.2 webpack内置服务器(自动刷新项目)
cnpm i -D webpack-dev-server
在package.json里写
自动打开谷歌浏览器
"start":"webpack serve --open chrome.exe"
执行npm start
2.3 清除dist目录
cnpm i -D clean-webpack-plugin
3.1 解决兼容性问题
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
webpack.config.js
// 引入一个包
const path = require('pach');
// 在webpack.config.js引入
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: ''./src/index.ts'',
// 指定打包文件所在目录
output:{
// 指定打包文件的目录
path: path.resolve(--dirname,'dist'),
// 打包后文件的文件
filename:''bundle.js'',
// 告诉webpack 不使用箭头函数
environment: {
arrowFunction: false
}
},
// 指定webpack打包时要使用的模块
module:{
// 指定要加载的规划
rules:[
{
// test指定规则生效的文件
test: /\.ts$/,
// 要使用的loder;从后往前执行
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options:{
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要运行正在哪个浏览器(后面是版本号)
targets: {
"ie":"7"
},
"corejs": "3",
// 使用corejs的方式("usage":表示按需加载)
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader',
],
// 要排除的文件
exclude: /node-modules/
}
]
},
// 配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
title: '这是自定义标题的位置'
}),
],
// 用来设置引用模块(哪些文件可以做为模块 )
resolve:{
extensions: ['.ts','.js']
}
};
配置ts
tsconfig.json
{
"compilerOptions":{
"module": "ES2015",
"target": "es2015",
// 严格模式
"strict":true
}
}
在package.json里加
"build":"webpack"
webpack 打包ts项目_使用webpack打包ts相关推荐
- webpack打包压缩混淆_细说webpack系列 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目 首先创建项目,创建一个名为webpack的文件夹,进入文 ...
- git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
- java 打包 ios项目_[转]Unity之打包IOS流程
Unity是个开放性的平台,打包时也可以选择多种打包类型,几乎包含了所有的平台,目前主流Android,iOS平台,Android平台可以直接使用Unity自行打包,但iOS平台需要借助Mac电脑进行 ...
- maven 打包java项目_如何使用maven打包java项目?
maven-assembly-plugin插件可用于为maven项目打包,可指定打包的类型,下面通过一个demo来说明使用方法. 示例 项目结构: pom配置: xmlns:xsi="htt ...
- python打包flask 项目_使用pyinstaller将flask应用打包
Pyinstaller 用户将python程序打包成各个平台可直接运行的程序,也可以算作是对代码加密的一种方式.pyinstaller的安装及使用方式请参考官网. 注:该文章的系统环境是ubuntu ...
- UMI+TS项目 配置多环境打包
需求:配置dev.test.staging.production 环境,打包使用不同API地址. 创建不同环境的配置文件 (1)官方文档:多环境多份配置 (2)创建配置文件 配置环境变量 (1)官方文 ...
- spring api层打包_Spring项目的按层打包已过时
spring api层打包 我认为Spring应用程序不应该以逐层方法构造. 在我看来,按功能打包更有意义. 首先,让我简要描述每种方法. "按层打包"(在非Java世界中为&qu ...
- maven 打包替换文件_使用Maven打包生成文件 | 学步园
状况:Maven会自动package一些文件到默认目录,或我们会指定一些文件生成到指定目录.比如一些配置文件,一些脚本. 需求:将这些需要文件打包成一个gz压缩包 方法: 1. 建立assembly文 ...
- 【新】使用setuptools打包Python项目
如何使用setuptools打包Python项目 如何使用setuptools打包Python项目 一.准备 二.项目结构 三.简单打包 3.1 文件内容 3.2 打包项目 3.3 安装测试 四.自定 ...
最新文章
- 【C++】【五】循环链表
- 为什么单片机程序中会有延时程序加入
- ffmpeg 视频处理命令集合
- java 数据结构经典算法
- mysql identifier name is too long_ORA-00972: identifier is too long 问题处理
- java键盘事件键值表_Java的20年:重大事件的时间表
- java applet 换行_Java复习题
- 面试突击 005 | Redis 是如何实现高可用的?它的实现方式有哪些?「视频版」
- apache php 工作模式,PHP Apache中两种工作方式区别(CGI模式、Apache 模块DLL)
- 电商产品页多种出彩表现设计手法!
- java 执行oracle命令_利用oracle存储过程执行操作系统命令
- 区间DP lightoj 1422
- C#使用webclient下载图片返回403forbiden
- efucms搭建教程_EFUCMS E16小说漫画源码(附安装教程)
- 8.21: Hackday、慈善x快速迭代
- 华裔天才数学家-陶哲轩
- LINUX从零开始——ENGINEER(云计算应用管理)——Day3 [逻辑卷管理、RAID磁盘阵列、进程管理]
- 古典概型,条件概率,贝叶斯公式
- 小组取什么名字好_寓意兴旺的公司名字取什么名字好
- 【全开源+免费更新】doodoo.js项目结构
热门文章
- java win10 写入c盘_win10 1709 安装后很多软件没有权限向C盘写入文件
- 深度学习损失函数大全
- EfficientNetV2 笔记
- pycharm快捷键不能用了
- Windows下编译TensorFlow1.3 C++ library及创建一个简单的TensorFlow C++程序
- python KeyError: 4
- wing 切换python版本
- opencv各版本 IplImage Mat 转换
- jdialog模态化
- The SDK Build Tools revision (23.0.3) is too low for project ':app'. Minimum required is 25.0.0