完整配置

经过上面的步骤，我们完成了以下的Webpack配置

Webpack配置文件

所在目录

package.json (包的依赖管理配置文件)
eslint.config.js (Eslint配置文件)
webpack (Webpack配置文件目录)
  ├── common.js (共享配置)
  ├── webpack.dev.js (开发专属配置)
  └── webpack.prod.js (生产专属配置)

包依赖管理配置文件

{
  "name": "wp1",
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack server --config ./webpack/webpack.dev.js",
    "build": "webpack --config ./webpack/webpack.prod.js"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "webpack-cli": "^6.0.1",
    "webpack-merge": "^6.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.27.4",
    "@babel/preset-env": "^7.27.2",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.2",
    "eslint": "^9.28.0",
    "eslint-webpack-plugin": "^5.0.1",
    "globals": "^16.2.0",
    "html-webpack-plugin": "^5.6.3",
    "mini-css-extract-plugin": "^2.9.2",
    "postcss": "^8.5.4",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.2.0",
    "sass": "^1.89.1",
    "sass-loader": "^16.0.5",
    "style-loader": "^4.0.0",
    "webpack": "^5.99.9",
    "webpack-dev-server": "^5.2.1"
  },
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]
}

webpack.common.js 公共配置

// webpack.common.js
import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export {path,__dirname}
export const common =  {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: 'static/images/[hash:10][ext][query]',
        },
      },
      {
        test: /\.(ttf|woff2?|docx?|xlsx?|pptx?|mp[34]|avi|pdf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/media/[hash:10][ext][query]',
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    })
  ],
};

webpack.dev.js 开发环境

// webpack.dev.js
import { merge } from 'webpack-merge';
import ESLintPlugin from 'eslint-webpack-plugin';
import {common,path,__dirname} from './webpack.common.js';

export default merge(common, {
  mode: 'development',
  output: {
    path: undefined,
    filename: 'static/js/main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, '../src'),
    }),
  ],
  devServer: {
    host: 'localhost',
    port: '2800',
    open: true,
    hot: true
  }
});

webpack.prod.js 生产环境

// webpack.prod.js
import { merge } from 'webpack-merge';
import ESLintPlugin from 'eslint-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import {common,path,__dirname} from './webpack.common.js';

const getStyleLoader = (pre) => {
  const loaders = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"],
        },
      },
    },
  ];
  if (pre) loaders.push(pre);
  return loaders;
};

export default merge(common, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/main.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: getStyleLoader(),
      },
      {
        test: /\.s[ac]ss$/i,
        use: getStyleLoader('sass-loader'),
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, '../src'),
    }),
    new MiniCssExtractPlugin({
      filename: 'static/css/main.css'
    }),
    new CssMinimizerPlugin(),
  ]
});

Eslint配置文件

// eslint.config.js
import js from '@eslint/js';
import globals from 'globals'; // 需要先安装：npm install globals

export default [
  js.configs.recommended,
  {
    files: ['src/**/*.{js,ts,vue}'],
    languageOptions: {
      ecmaVersion: 2022,      // 指定 ECMAScript 版本
      sourceType: 'module',   // 使用 ES 模块
      globals: {
        ...globals.browser,   // 浏览器环境全局变量（如 window、document）
        ...globals.node,      // Node.js 环境全局变量（如 process、require）
      },
    },
    rules: {
      'no-var': 'error', // 不允许使用 var声明变量
      'no-extra-boolean-cast': 'off', // 强制转Boolean
      'prefer-const': 'warn',
      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      'no-console': 'off',
    },
  },
];