webpack turbopack vite 前端打包工具

webpack八股

entry

output

loader

webpack只能处理js和json文件

让webpack有处理其他类型文件的能力

babel-loader # 将现代js转换为传统js ts-loader # typescript loader, 将ts文件给typescript依赖处理 # css style-loader # 将处理好的css注入DOM css-loader png/jpg: url-loader

plugin

HtmlWebpackPlugin

为你生成html文件

mode

webpack使用

npm i webpack webpack-cli --save-dev npm i webpack-dev-server --save-dev # 热更新 webpack -c ./webpack.config.ts # 注意nodejs是否有处理ts的能力

webpack.config.ts

const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const config: webpack.Configuration = { target: "node", # 默认"web", 指示webpack为特定环境生成的代码 mode: "development", # "development" | "none" | "production" entry: "./main.ts", module: { # 让webpack有处理其他类型文件的能力 rules: [ { test: /\.tsx?$/, use: "ts-loader", # 执行顺序从右向左 exclude: /node_modules/, }, ], }, resolve: { extensions: [".tsx", ".ts", ".js"], # 如果多个文件具有相同的名称但扩展名不同，Webpack会先解析数组中最前面的扩展名并忽略其他 }, output: { # 输出位置 filename: "bundle.js", path: path.resolve(__dirname, "dist"), }, }; export default config;

webpack-dev-server

热更新

import "webpack-dev-server"; const config: webpack.Configuration = { // ... devServer: { port: 3000, hot: true, compress: true, static: { directory: path.join(__dirname, "public") }, }, };