1.第一步 初始化项目
npm init -y
2.安装第二步安装依赖 先安装四个初始化使用的 webpack webpack-cli typescript ts-loader
cnpm i -D webpack webpack-cli typescript ts-loader
3.根目录下创建文件webpack.config.js并修改文件内容
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: "./src/index.ts", // 指定入口文件output: {path: path.resolve(__dirname,'dist'),// 指定打包文件所在目录filename: "bundle.js" // 打包后文件的文件},// 指定webpack 打包我使用了模块module: {rules: [{test:/\.ts$/,use: 'ts-loader',exclude: node_modules},]}
}4.根目录下创建一个文件tsconfig.json 修改文件
"compilerOptions": {"module": "ES2015","target": "ES2015","strict": true}
5.在package.json中的‘scripts’新增build
"build":"webpack"
6.执行项目 npm run build
7.安装插件 帮助我们自动生成html文件
cnpm i -D html-webpack-plugin
引入该插件 在webpack.config.js
8.安装启动服务器
npm i -D webpack-dev-server
在package.json文件监听命令 => “start”: “webpack serve --open chrome.exe”
9.每次打包先清空dist目录，再执行打包；
npm i -D @babel/core clean-webpack-plugin
再webpack.config.js文件中引入
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
再这个文件的plugins文件中
new CleanWebpackPlugin(),
10.resolve作为模块被使用（ts不知道自己是模块，所以需要配置暴露下就可以引用模块）
11.要兼容ie浏览器需要安装的插件（ie亲妈都把他抛弃了，但是苦逼前端还要兼容，????）@babel/core 核心工具@babel/preset-env 预先设置的环境工具可能会出现不成功，那就去掉了
npm i -D @babel/core clean-webpack-plugin
npm i -D @babel/core @babel/preset-env babel-loader core-js
最后的最后发现跑不起来，算了不要了，对你有用的你就看吧，没用拉到
参考课程：https://www.bilibili.com/video/BV1Xy4y1v7S2?p=12