1、在项目中安装npm
使用代码:npm install
在项目中安装npm,安装成功会生成node-modules文件夹和package.json文件
2、在项目中安装webpack,webpack-cli,typescipt,ts-loader依赖
使用代码:npm install webpack webpack-cli typescript ts-loader --save-dev
安装所需的依赖,安装成功,会在package.json文件中生成依赖
3、配置webpack打包配置文件webpack.config.js
const path=require('path');
module.exports={
//指定入口文件
entry: "./js/index.ts",
//指定输出目录
output: {
//指定打包文件目录路径
path: path.resolve(__dirname,"demo"),
//打包后文件的文件
filename: "bundle.js"
},
mode:'development',
//指定webpack打包时要使用的模块
module: {
//指定加载的规则
rules: [
{
//制定规则生成的文件
test:/\.ts$/,
//要使用的loader
use: "ts-loader",
//要排除的文件
exclude: [/node-modules/]
}
]
}
}
4、配置ts编译配置文件tsconfig.json
{
/*"include"用来表示哪些ts文件需要被编译,
采用相对路径,其中** 表示任意目录,* 表示任意文件*/
"include": [
"./js/*"
],
/*"exclude"用来表示哪些ts文件不需要被编译,
采用相对路径,其中** 表示任意目录,* 表示任意文件*/
"exclude": [
"node_modules"
],
/*编译器配置选项*/
"compilerOptions": {
//编译转换的js版本
"target": "es6",
//编译转化的模块化标准
"module": "es6"
}
}
5、编写测试代码
按照webpack配置中entry: “./js/index.ts”,新建对应文件,并编写相应的测试代码:
6、运行打包
方法1-直接在项目所在文件夹目录命令行输入"webpack"。
方法2-在package.json文件中配置运行命令,并在项目文件命令行中输入"npm run webpack"
7、模块化引入问题
有时候我们使用了模块化,而webpack打包时不清楚哪些文件可以引入,这就需要我们在webpack配置文件里设置
module.exports={
resolve: {
extensions: ['.ts','.js']//ts,js文件可以引入模块化
}
}
8、打包浏览器兼容问题
实际项目中,网页会在不同浏览器中进行访问,这就需要注意兼容性问题了。
- 安装@babel/core,@babel/preset-env,babel-loader,core-js所需依赖,安装指令
npm install @babel/core @babel/preset-env babel-loader core-js --save-dev
- 优化webpack配置文件webpack.config.js
//引入一个包
const path=require('path');
module.exports={
//指定输出目录
output: {
//指定打包文件目录路径
path: path.resolve(__dirname,"demo"),
//打包后文件的文件
filename: "bundle.js",
//配置环境不适用箭头函数
environment:{
//是否采用箭头函数
arrowFunction:false
}
},
//指定webpack打包时要使用的模块
module: {
//指定加载的规则
rules: [
{
//要使用的loader
use:[
//配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options: {
presets:[
[
//制定环境插件
"@babel/preset-env",
//配置信息
{
//需要兼容的目标浏览器
targets:{
"chrome":"88",
"ie":"11"
},
//指定core-js版本
"corejs":"3",
//使用core-js的方式为按需加载
"useBuiltIns":"usage"
}
]
]
}
},
"ts-loader"
]
}
]
}
}
webpack配置可复制
const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
//指定入口文件
entry: {
main: "./js/index.ts",
},
//指定输出目录
output: {
//指定打包文件目录路径
path: path.resolve(__dirname,"demo"),
//打包后文件的文件
filename: "bundle.js",
//配置环境不适用箭头函数
environment:{
arrowFunction:false
}
},
//打包模式
mode:'development',
//指定webpack打包时要使用的模块
module: {
//指定加载的规则
rules: [
{
//制定规则生成的文件
test:/\.ts$/,
//要使用的loader
use:[
//配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options: {
presets:[
[
//制定环境插件
"@babel/preset-env",
//配置信息
{
//需要兼容的目标浏览器
targets:{
"chrome":"88",
"ie":"11"
},
//指定core-js版本
"corejs":"3",
//使用core-js的方式为按需加载
"useBuiltIns":"usage"
}
]
]
}
},
"ts-loader"
],
//要排除的文件
exclude: [/node-modules/]
}
]
},
//配置webpack插件
plugins: [
//作用打包自动生成html,并引入相应资源
new HtmlWebpackPlugin({
//自定义title
title: "Hello,TypeScript!",
//按模板生成html
template: "./demo.html"
}),
new CleanWebpackPlugin(),
],
resolve: {
extensions: ['.ts','.js']
}
}