webpack的基本配置

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 = `
    <h1>Hello, Webpack!</h1>
    <p>这是一个 Webpack 基础配置教学 Demo 🎉</p>
    <ul>
      <strong>你学到了：</strong>
      <li>✅ entry / output 配置</li>
      <li>✅ loader（处理 CSS）</li>
      <li>✅ plugin（HtmlWebpackPlugin 自动生成 HTML）</li>
      <li>✅ mode（开发 / 生产模式）</li>
      <li>✅ devServer（开发服务器 + 热更新）</li>
    </ul>
  `;
  return app;
}

document.querySelector('#app').appendChild(createApp());

注意

JS 会由 HtmlWebpackPlugin 自动注入
css由style-loader注入
运行开发服务器时并没有生成dist文件夹，只有打包后才有dist