webpack turbopack vite 前端打包工具

webpack八股entryoutputloaderwebpack只能处理js和json文件让webpack有处理其他类型文件的能力babel-loader # 将现代js转换为传统js ts-loader # typescript loader, 将ts文件给typescript依赖处理 # css style-loader # 将处理好的css注入DOM css-loader png/jpg: url-loaderpluginHtmlWebpackPlugin为你生成html文件modewebpack使用npm i webpack webpack-cli --save-dev npm i webpack-dev-server --save-dev # 热更新 webpack -c ./webpack.config.ts # 注意nodejs是否有处理ts的能力webpack.config.tsconst __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) }, }, };