文章目录
1. 使用 `npm init -y` 初始化项目2. 安装webpack相关依赖包3. webpack 最基础配置4. 配置 typescript 打包环境5. babel 低版本浏览器兼容6. 编译时自动删除已有的历史 dist 文件7. 指定html模板8. 热编译 & mode编译模式 最终状态安装所有依赖`webpack.config.js` 配置文件最终状态`package.json` 文件最终状态`tsconfig.json` 文件最终状态目录结构1. 使用npm init -y初始化项目
2. 安装webpack相关依赖包
cnpm i webpack webpack-cli -D;3. webpack 最基础配置
3.1 在项目根目录下创建 webpack 的配置文件webpack.config.js, 进行下列最基本配置;
const path = require("path");module.exports = {// 入口文件entry: "./src/index.js",// 输出路径output: {filename: "bundle.js", // 输出文件名称path: path.resolve(__dirname, "./dist"), // 输出路径},};
3.2 编辑package.json文件，添加打包命令;
在scripts中添加"build": "webpack"， 最终结果如下
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"}
npx webpack或直接执行npx进行打包编译;
3.3npm run build运行打包工具
要根据webpack.config.js配置文件中入口文件的配置，创建有符合路径的入口文件。
4. 配置 typescript 打包环境
4.1cnpm i typescript ts-loader -D
4.2 在webpack.config.js中配置typescript的编译配置
const path = require("path");module.exports = {// 入口文件entry: "./src/index.ts", // ************ --- 这里修改为 ts 文件// 输出路径output: {filename: "bundle.js", // 输出文件名称path: path.resolve(__dirname, "./dist"), // 输出路径},module: {rules: [{// 按规则匹配需要进行加载的文件test: /\.ts$/,// 使用加载器的名称 use: 'ts-loader',// 排除不需要加载的文件exclude: /node_modules/,}]},}
4.3tsconfig.jsonts 的编译配置文件
在根目录下创建 ts 的编译配置文件tsconfig.json， 直接创建，空文件也可以生效;或使用tsc --init生成配置文件， 此配置文件含有一些默认配置，需要按需修改；
运行npm run build即可进行ts编译;
5. babel 低版本浏览器兼容
5.1cnpm i @babel/core @babel/preset-env babel-loader core-js -D;
5.2 修改配置文件webpack.config.js;
module.exports = {output: {// 1. *** --- 设置webpack不使用箭头函数 --- ***/environment: {arrowFunction: false,},},module: {rules: [{// 按规则匹配需要进行加载的文件test: /\.ts$/,// 使用加载器的名称 // 加载器运行顺序， 由后往前；(此处: 先通过ts-loader将ts编译为js， 然后使用babel-loader进行兼容性处理)use: [// 2. *** --- babel最重要的一坨配置 --- *** //{loader: 'babel-loader',options:{presets: [["@babel/preset-env",{// 配置需要兼容的浏览器targets: {"chrome": "79","ie": "11",},// 指定core-js版本"corejs": "3",// 设置core-js的使用方式"useBuiltIns": "usage", // usage: 按需加载}]],},},// *** --- / 2. babel最重要的一坨配置 --- *** //'ts-loader',],// 排除不需要加载的文件exclude: /node_modules/,}]},}
6. 编译时自动删除已有的历史 dist 文件
6.1cnpm i clean-webpack-plugin -D: 安装第三方插件；
6.2 修改配置文件
const {CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {// ... 其余配置plugins: [new CleanWebpackPlugin(),],}
7. 指定html模板
cnpm i html-webpack-plugin -D: 安装依赖；修改配置文件const {CleanWebpackPlugin } = require("clean-webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// ... 其余配置plugins: [new CleanWebpackPlugin(),// 指定模板文件// 插件会自动将编译出来的入口文件(./dist/bundle.js)引入到 html 文件中;// 如果html没有需要特殊配置,可直接省略指定模板文件, 如下:// new HtmlWebpackPlugin()new HtmlWebpackPlugin({template: "./index.html", }),],}
8. 热编译 & mode编译模式
动态监听ts文件改变，自动编译；
cnpm i webpack-dev-server -D配置调试命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack",// --open: 自动打开默认浏览器// --mode=development: 指定调试模式为开发(development)模式// --mode=production: 指定调试模式为生产(production)模式"dev": "webpack serve --open --mode=development","prod": "webpack serve --open --mode=production"}
查看当前调试模式
console.log(process.env.NODE_ENV);
cnpm run dev: 开启调试
最终状态
安装所有依赖
cnpm i -D webpack webpack-cli typescript ts-loader @babel/core @babel/preset-env babel-loader core-js clean-webpack-plugin html-webpack-plugin webpack-dev-server
webpack.config.js配置文件最终状态
const path = require("path");const {CleanWebpackPlugin } = require("clean-webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// 入口文件entry: "./src/index.ts",// 输出路径output: {filename: "bundle.js", // 输出文件名称path: path.resolve(__dirname, "./dist"), // 输出路径// 设置webpack不使用箭头函数environment: {arrowFunction: false,},},module: {rules: [{// 按规则匹配需要进行加载的文件test: /\.ts$/,// 使用加载器的名称 // 加载器运行顺序， 由后往前；(此处: 先通过ts-loader将ts编译为js， 然后使用babel-loader进行兼容性处理)use: [// *** --- babel最重要的一坨配置 --- *** //{loader: 'babel-loader',options: {presets: [["@babel/preset-env",{// 配置需要兼容的浏览器targets: {"chrome": "79","ie": "11",},// 指定core-js版本"corejs": "3",// 设置core-js的使用方式"useBuiltIns": "usage", // usage: 按需加载}]],},},// *** --- / babel最重要的一坨配置 --- *** //'ts-loader',],// 排除不需要加载的文件exclude: /node_modules/,}]},plugins: [new CleanWebpackPlugin(),// 指定模板文件// 插件会自动将编译出来的入口文件(./dist/bundle.js)引入到 html 文件中;// 如果html没有需要特殊配置,可直接省略指定模板文件, 如下:// new HtmlWebpackPlugin()new HtmlWebpackPlugin({template: "./index.html",}),],}
package.json文件最终状态
{"name": "typescript","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --mode=production","dev": "webpack serve --open --mode=development","prod": "webpack serve --open --mode=production"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.19.6","@babel/preset-env": "^7.19.4","babel-loader": "^8.2.5","clean-webpack-plugin": "^4.0.0","core-js": "^3.25.5","html-webpack-plugin": "^5.5.0","ts-loader": "^9.4.1","typescript": "^4.8.4","webpack": "^5.74.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.11.1"}}
tsconfig.json文件最终状态
此文件使用tsc --init自动生成，不予展示；目录结构
至此：.ts文件的 webpack 打包功能就实现了
