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"