配置webpack打包ts代码
使用webpack打包ts代码
具体步骤如下：
1.新一个项目文件夹
2.执行npm init -y生成package.json
3.执行npm i -D webpack webpack-cli typescript ts-loader
4.编写webpack文件，新建一个webpack.config.js
webpack.config.js代码如下：
//引入一个包
const path = require('path');
//webpack中的所有配置信息都应该写在module.exports中
module.exports = {
//指定入口文件
entry:"./src/index.ts",
//指定打包文件所在的目录
output:{
//指定打包文件的目录
path:path.resolve(__dirname,'dist'),
//打包后文件的文件
filename:"bundle.js"
},
//指定webpack打包时要使用的模块
module:{
//指定要加载的规则
rules:[
{
//test 指定的是规则生效的文件
test:/\.ts$/,
//要使用的loader
use:'ts-loader',
//要排除的文件
exclude:/node-modeules/
}
]
}
}
5.在根目录新建一个tsconfig.json配置文件
{
"compilerOptions":{
"module":"ES2015",
"target":"ES2015",
"strict":true
}
}
6.在package.json文件中添加一行
"scripts":{
"build":"webpack"
}
7.执行npm run build打包，出现dist/burdle.js就成功了
以上是最简单的一个webpack基础流程。
下面我们来自动生成html文件
8.执行npm i -D html-webpack-plugin插件（下载成功后，package.json就有依赖了）
9.在webpack.config.js文件中导入
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//找到module同级别后面添加配置Webpack插件代码
plugins:[
new HTMLWebpackPlugin(
//title:"这是一个自定义标题title" （可不写）
//template:"文件模板路径" （可不写）
)
]
10.执行npm run build重新编译，dist文件夹下面就自动生成html文件了。
11.安装内置服务器，自动运行更新到浏览器中。执行npm i -D webpack-dev-server。在package.json文件中添加一行
"scripts":{
"start":"webpack server --open chrome.exe"
}
12.执行npm i -D clean-webpack-plugin插件。这个插件是用来清理dist文件的。在webpack.config.js文件中导入
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//找到module同级别后面添加配置Webpack插件代码
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin(
//title:"这是一个自定义标题title" （可不写）
template:"文件模板路径" （可不写）
),
]
然后在执行 npm run build,你看不出什么效果，其实这个命令执行的时候是先清空dist下面的文件，然后再重新创建的，重新编译的，这样做是为了避免有旧文件。
13.最后一个问题：在webpack的默认情况下，webpack是不知道TS可以作为模块使用的，所以我们需要特意配置一下。在webpack.config.js文件中，找到plugins同层级别后添加：
//用来设置引用模块
resolve:{
extensions:['.ts','.js'] //就是以.ts和.js为后缀名文件
}
14.兼容性问题（兼容低版本浏览器）
babel的作用：
1.可以把新语法转行成就语法
2.新的技术，在旧的浏览器不支持，通过babel就可以让就浏览器支持新技术了。
执行npm i -D @babel/core @babel/preset-env babel-loader core-js。在webpack.config.js中找到module下面的use修改代码如下：
use：[
//配置babel
{
//指定加载器
loader:"babel-loader",
//设置babel
options:{
//设置预定义的环境
presets:[
[
//指定环境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
targets:{
"chrome":"88",
},
//指定corejs的版本
"corejs":"3",
//使用corejs的方式 "usage":表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
]
//告诉webpack不使用箭头函数
//在webpack.config.js中，找到output下面添加
environment:{
arrowFunction:false
}
参考资料：
1、https://blog.csdn.net/weixin_43754395/article/details/114066244，这一篇比较详细具体，逻辑上都能说的通。
2、https://www.jianshu.com/p/2bc50b542969，这一篇不是很详细，对照着看第一篇用的，参考价值不大。
