webpack
npm init -v
项目初始化，会生成pageage.json
安装依赖
npm i -D webpack webpack-cli typescript ts-loader
webpack-cli 是 webpack的命令行工具， ts-loader把typescript和webpack整合一体
新建 webpack.config.js 文件
对ts文件进行编译，还需要新建 tsconfig.json ，来指定ts的编译规范
pageage.json 添加bulid 命令打包 ：
"scripts":{
"build":"webpack"
}
webpack插件帮助自动生成html文件
npm i -D html-webpack-plugin
安装热更新，代码改变自动刷新浏览器
npm i -D webpack-dev-server
pageage.json 配置启动命令,并打开chrome浏览器
"scripts":{
"start":"webpack serve --open chrome.exe"
}
将之前打包的dist文件清空，在打包新的
npm i -D clean-webpack-plugin
兼容性
npm i -D @babel/core @babel/preset-env babel-loader core-is
主要是对webpack.config.js 文件的配置，可参考如下
const path = require("path");// node.js 里的模块，主要用于帮助我们拼接路径
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件 ,
const {
CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports={
// webpack 中所有的配置信息
// 指定入口文件
entry:"./src/index.ts",
//打包文件所在目录 与文件名
output:{
path:path.resolve(_dirname,"dist"),
filename:"bundle.js",
environment:{
// 告诉webpack 不使用箭头函数
arrowFunction:false
}
},
//指定webpack打包时要使用模块
module:{
//指定要加载的规则
rules:[
{
test:/\.ts$/, //test 指定的是规则生效的文件 这里是匹配所有.ts结尾的文件
use:[ //要使用的loader
{
// 配置babel
loader:"babel-loader", //指定加载器
//设置babel
option:{
presets:[ // 设置预定义的环境
[
"@babel/preset-env", //指定环境的插件
//配置信息
{
targets:{
//要兼容的目标浏览器
"chrome":"58",
"ie":"11"
},
"corejs":"3", // 指定corejs的版本
"useBuiltIns":"usage", // 使用corejs的方式"usage"表示按需加载
}
]
]
}
},
'ts-loader' //加载器执行顺序是从后往前执行
],
exclude:/node-modules/ //要排除的文件
}
]
},
//配置webpack插件
plugins:[
new HTMLWebpackPlugin(), // 打包后自动生成html文件，并自动引入js文件
new CleanWebpackPlugin(), // 将之前打包的dist文件清空，在打包新的
],
//用来设置引用模块
resolve:{
extensions:['.ts','.js'], //项目中可以引用ts和js文件
}
}