package.json{ name: webpack-teach-demo, version: 1.0.0, description: Webpack 基础配置教学 Demo, private: true, scripts: { build: webpack --mode production, dev: webpack serve --mode development --open }, devDependencies: { webpack: ^5.94.0, webpack-cli: ^5.1.4, webpack-dev-server: ^5.1.0, html-webpack-plugin: ^5.6.0, css-loader: ^7.1.2, style-loader: ^4.0.0 } }webpack.config.js// webpack.config.js —— Webpack 核心配置文件 const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { // ① 入口webpack 从这里开始打包 entry: ./src/index.js, // ② 出口打包后的文件输出到哪里 output: { path: path.resolve(__dirname, dist), filename: bundle.[contenthash:8].js, clean: true, // 每次构建前自动清空 dist 目录 }, // ③ 模式development开发或 production生产 // mode: development, // 可通过 CLI 参数 --mode 覆盖 // ④ module.rules配置 loader让 webpack 能处理非 JS 文件 module: { rules: [ { test: /\.css$/, // 匹配 .css 文件 use: [style-loader, css-loader], // 从右到左执行 }, ], }, // ⑤ plugins扩展 webpack 功能 plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html, // 使用模板 }), ], // ⑥ devServer开发服务器配置 devServer: { static: { directory: path.join(__dirname, dist), }, port: 3000, hot: true, // 热模块替换HMR }, // ⑦ 开发工具生成 source map方便调试 devtool: inline-source-map, };src/index.js// src/index.js —— 应用入口文件 import ./style.css; function createApp() { const app document.createElement(div); app.className app; app.innerHTML h1Hello, Webpack!/h1 p这是一个 Webpack 基础配置教学 Demo /p ul strong你学到了/strong li✅ entry / output 配置/li li✅ loader处理 CSS/li li✅ pluginHtmlWebpackPlugin 自动生成 HTML/li li✅ mode开发 / 生产模式/li li✅ devServer开发服务器 热更新/li /ul ; return app; } document.querySelector(#app).appendChild(createApp());注意JS 会由 HtmlWebpackPlugin 自动注入css由style-loader注入运行开发服务器时并没有生成dist文件夹只有打包后才有dist