1、首先需要初始化项目，准备一个空项目tsProject， 使用命令npm init -y对项目进行初始化，目录下生成一个空的package.json
npm init -y
2、安装依赖:可以用cnpm 或者npm,记得要是安装依赖失败，得删除node_modeules后重新使用命名下载
cnpm install -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin
- 'html-webpack-plugin’插件：生成一个html文件，能够让我们写的ts文件，js文件自动引入此html文件中，不用后期写一次需要手动引入
- "clean-webpack-plugin"插件：清除每次打包生成的dist文件，重新生成新的dist文件
3、在项目根目录下新建文件名webpack.config.js，来配置webpack,同时在根目录下创建一个src文件夹，里面写项目的代码，在src下创建index.html，此html文件是模板，'html-webpack-plugin’插件自动生成的html ，会根据这个模板生成
介绍： 配置webpack 自动打包，webpack中文文档
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: "./src/index.ts", // 入口文件
output:{
// 指定打包后文件所在目录
path:path.resolve(__dirname,'dist'), // 指定打包后文件的文件
filename: "bundle.js",
environment: {
// 告诫webpack不要自动使用箭头函数,可选
arrowFunction:false
}
},
mode: 'development', // 设置mode
module: {
// 指定webpack打包时要使用模块
rules: [ // 指定要加载的规则
{
test: /\.ts$/, //test 指定的是规则生效的文件
use:'ts-loader', // 要使用的loader
exclude: /node_modeules/ // 要排除的文件
}
]
},
plugins: [ // 配置webpack插件
new HTMLWebpackPlugin({
template: './src/index.html' // 这里是html的模板，生成的html 会根据这个模板生成
})
],
resolve: {
extensions: [".ts", '.js'] // 凡是模块中引入ts，js文件都能被扩展,能被引入使用
}
}
4.在package.json文件中的scripts设置启动的命令行
"build": "webpack --mode production",
"dev": "webpack --mode development",
"start": "webpack-dev-server --open" // 打开浏览器
5.在根目录下创建一个tsconfig.json，对ts进行配置
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
6、测试一下，可以在src下创建一个index.ts文件，测试一下使用npm run bulid 打包一下 会发现生成一个dist文件，里面有bundle.js和index.html文件则成功。
npm run bulid
7、npm start 打开浏览器
npm start
8、以上能够满足需求，但是有时候有些浏览器不兼容es6代码等兼容性问题，此时需要bable插件配合使用
cnpm install -D @babel/core @babel/preset-env babel-loader core-js
9、修改webpack.config.js
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry: "./src/index.ts", // 入口文件
output:{
// 指定打包后文件所在目录
path:path.resolve(__dirname,'dist'), // 指定打包后文件的文件
filename: "bundle.js",
environment: {
// 告诫webpack不要自动使用箭头函数,可选
arrowFunction:false
}
},
mode: 'development', // 设置mode
module: {
// 指定webpack打包时要使用模块
rules: [ // 指定要加载的规则
{
test: /\.ts$/, //test 指定的是规则生效的文件
use:[
{
// 配置加载器
loader: "babel-loader",
// 设置babel
options: {
presets:[
[
"@babel/preset-env", // 指定环境的插件,
{
// 配置位置
targets: {
// 要兼容的目标浏览器
"chrome":"88"
},
"corejs": "3", // 指定corejs的版本
"useBuiltIns": "usage" //使用corejs版本为3，"usage"表示按需加载
}
]
]
}
},
'ts-loader'
], // 要使用的loader
exclude: /node_modeules/ // 要排除的文件
}
]
},
plugins: [ // 配置webpack插件
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: './src/index.html'
})
],
resolve: {
extensions: [".ts", '.js'] // 凡是模块中引入ts，js文件都能被扩展
}
}