1、新建一个文件夹，npm init -y 生成package.json 文件
2、npm i -D webpack webpack-cli typescript ts-loader 安装webpack和ts需要的包
webpack 从 4.0 版本开始，在安装时，就必须要安装webpack 和 webpack-cli 这2个东西。
webpack 是打包代码时依赖的核心内容，而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。
typescript 包是将ts语言转化为js的，是ts的解析器
ts-loader 是webpack打包编译typescript的工具，就是需要这个包，typescript才能在webpack中使用
3、增加webpack.config.js文件，webpack的配置文件
const path = require('path') // node包里面的path模块，主要是为了帮我们拼接路径
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
mode: 'development',
// 指定入口文件
entry: './src/index.ts',
// 指定打包文件输出目录
output: {
path: path.resolve(__dirname,'dist'), //'./dist' 使用path拼接完整路径
// 打包后文件的名字
filename: 'bundle.js', // 随意命名
},
// 指定webpack打包时要使用的模块，哪些loader
module: {
// 指定要加载的规则
rules: [
{
// test指定的是对那些文件生效
test:/\.ts$/, // 通过正则表达式匹配文件的名字
loader: 'ts-loader', // 通过ts-loader处理以ts结尾的文件
exclude: /node_modules/, // 指定要排除的文件
options: {
configFile: path.resolve(__dirname, './ts.config.json')
}
}
]
}
}
4、新建src文件夹，里面建立一个ts文件，作为入口文件
5、新增ts.config.json，对ts文件进行编译的配置
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
"removeComments":true // 删除ts文件中的注释，不算打包生成的注释
},
"files":[
"./src/index.ts"
]
}
6、package.json文件中script中增加一条
"build": "webpack" // 执行npm run build 能够打包
此时npm run build 就能生成由index.ts的编译后的bundle.js文件
7、npm i -D html-webpack-plugin
安装html-webpack-plugin，作用：动态生成html文件，并且把打包后的js文件绑定进去
在webpack.config.js文件对html-webpack-plugin进行配置，
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 配置webpack插件
plugins:[
new HTMLWebpackPlugin({ //如果不要求，直接new HTMLWebpackPlugin() ，如果需要设置标题，传入配置对象
title:'我想要个不一样的title'
})
]
此时，执行npm run build dist中会生成 bundle.js文件，和绑定了bundle.js文件的index.html文件
另外，可以指定一个html文件作为模板，生成输出的html
plugins:[
new HTMLWebpackPlugin({
template:'./src/index.html'
})
]
8、npm i -D webpack-dev-server
安装webpack-dev-server， 作用：在dev环境启动server服务，并且该服务器在工程内部，与webpack相关联，webpack运行后，服务会自动刷新
9、在package.json中script中设置
"start": "webpack serve --open"
执行npm run start 就会启动webpack-dev-server服务
image.png
页面是实时更新的
10、npm i -D clean-webpack-plugin
安装clean-webpack-plugin，作用：每次打包之前把dist文件夹清空
更改package.json文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins:[
new HTMLWebpackPlugin({
template:'./src/index.html'
}),
new CleanWebpackPlugin()
]
11、设置可以引入的模块类型，
// 配置webpack插件
plugins:[
new HTMLWebpackPlugin({
template:'./src/index.html'
}),
new CleanWebpackPlugin()
],
// 用来设置哪些可以作为模块引入
resolve:{
extensions:['.ts','.js'] //以ts、js为后缀的文件可以作为模块引入，打包不报错
}
12、引入babel 为了兼容更多浏览器 下载+配置
npm i -D @babel/core @babel/preset-env babel-loader core-js
@babel/core babel的核心工具
@babel/preset-env 根据配置的目标环境自动采用需要的babel插件
babel-loader 将babel和webpak进行结合的以来
core-js 让老版本浏览器能支持新的proxy等的方法，补丁。需要按需安装
webpack.config.json 中配置，针对ts后缀文件
const path = require('path') // node包里面的path模块，主要是为了帮我们拼接路径
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
mode: 'development',
// 指定入口文件
entry: './src/index.ts',
// 指定打包文件输出目录
output: {
path: path.resolve(__dirname,'dist'), //'./dist' 使用path拼接完整路径
// 打包后文件的名字
filename: 'bundle.js', // 随意命名
},
// 指定webpack打包时要使用的模块，哪些loader
module: {
// 指定要加载的规则
rules: [
{
// test指定的是对那些文件生效
test:/\.ts$/, // 通过正则表达式匹配文件的名字
use: [ // 加载器的执行顺序是从后往前，要先执行ts-loader，在执行babel
// babel 需要一些配置
{
// 指定加载器
loader: 'babel-loader',
// 设置babel
options: {
// 设置预定义环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome": "58",
"ie": "11" // ie11不支持箭头函数
},
// 设置corejs的版本，下载的版本几写几
"corejs":3,
// 使用corejs的方式, "usage"为按需加载
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: 'ts-loader', // 通过ts-loader处理以ts结尾的文件
options: {
configFile: path.resolve(__dirname, './ts.config.json')
}
}
],
exclude: /node_modules/, // 指定要排除的文件
}
]
},
// 配置webpack插件
plugins:[
new HTMLWebpackPlugin({
template:'./src/index.html'
}),
new CleanWebpackPlugin()
],
// 用来设置哪些可以作为模块引入
resolve:{
extensions:['.ts','.js'] //以ts、js为后缀的文件可以作为模块引入，打包不报错
}
}
上述webpack.config.js中已经配置了 ie11兼容，但是还是报错箭头函数错误
image.png
这里的箭头函数不是我们写的ts，是webpack打包过程生成的js。需要设置
output中
// 告诉webpack不使用箭头函数
environment: {
arrowFunction: false
},
以上基本完成了配置了ts webpack babel的配置
网友评论