webpack5打包其他资源以及devServer的配置方式

1. 打包其他资源

1.1 安装必要的loader

npm install --save-dev file-loader url-loader
# 或使用Webpack5的资源模块（推荐）

1.2 配置资源处理

方法一：使用Webpack5内置的资源模块（推荐）

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // 处理图片资源
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        type: 'asset', // 自动选择 resource/inline
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb以下转为base64
          }
        },
        generator: {
          filename: 'images/[name].[hash:8][ext]'
        }
      },

      // 处理字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8][ext]'
        }
      },

      // 处理其他文件（PDF、CSV等）
      {
        test: /\.(pdf|csv|xlsx?|docx?|pptx?)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'files/[name].[hash:8][ext]'
        }
      },

      // 处理音频/视频
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:8][ext]'
        }
      }
    ]
  }
};

方法二：使用file-loader（兼容旧项目）

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:8].[ext]',
        outputPath: 'images/'
      }
    }
  ]
}

2. DevServer配置

2.1 安装webpack-dev-server

npm install --save-dev webpack-dev-server

2.2 基础配置

// webpack.config.js
module.exports = {
  // ... 其他配置
  devServer: {
    // 静态文件目录
    static: {
      directory: path.join(__dirname, 'public'),
    },

    // 启用gzip压缩
    compress: true,

    // 端口号
    port: 8080,

    // 自动打开浏览器
    open: true,

    // 热模块替换
    hot: true,

    // 启用HMR时显示全屏覆盖错误
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
      progress: true, // 显示编译进度
    },

    // 历史API回退，用于SPA路由
    historyApiFallback: true,

    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

2.3 完整配置示例

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash:8].js',
    clean: true, // 清理dist文件夹
    assetModuleFilename: 'assets/[name].[hash:8][ext]' // 统一资源输出路径
  },

  module: {
    rules: [
      // JavaScript/JSX
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },

      // CSS
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

      // Sass/SCSS
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },

      // 图片资源
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        }
      },

      // 字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },

      // 其他文件
      {
        test: /\.(pdf|csv|xlsx?|txt)$/i,
        type: 'asset/resource'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ],

  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: true
    },
    compress: true,
    port: 8080,
    open: true,
    hot: true,
    historyApiFallback: true,

    // 开发服务器主机配置
    host: 'localhost',

    // 允许使用本地IP访问
    allowedHosts: 'all',

    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: false
      }
    },

    // 自定义中间件
    onBeforeSetupMiddleware: function(devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      // 添加自定义header
      devServer.app.use((req, res, next) => {
        res.setHeader('X-Custom-Header', 'Custom Value');
        next();
      });
    }
  },

  // 开发工具
  devtool: 'eval-cheap-module-source-map',

  // 优化
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single'
  }
};

2.4 package.json脚本配置

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "dev": "webpack serve --open --mode development",
    "dev:host": "webpack serve --host 0.0.0.0 --port 8080"
  }
}

2.5 高级DevServer配置

devServer: {
  // 使用HTTPS
  https: true,

  // 或自定义证书
  // https: {
  //   key: fs.readFileSync('/path/to/server.key'),
  //   cert: fs.readFileSync('/path/to/server.crt'),
  //   ca: fs.readFileSync('/path/to/ca.pem'),
  // },

  // 设置请求头
  headers: {
    'X-Custom-Header': 'custom'
  },

  // 启用CORS
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
  },

  // 使用本地IP访问
  host: '0.0.0.0',

  // 实时重载配置
  liveReload: true,
  watchFiles: {
    paths: ['src/**/*', 'public/**/*']
  },

  // 设置公共路径
  devMiddleware: {
    publicPath: '/',
    writeToDisk: true // 将文件写入磁盘（可用于调试）
  },

  // 启用gzip
  compress: true,

  // 自定义中间件
  setupMiddlewares: (middlewares, devServer) => {
    if (!devServer) {
      throw new Error('webpack-dev-server is not defined');
    }

    // 添加自定义路由
    devServer.app.get('/custom', (req, res) => {
      res.json({ message: 'Custom route' });
    });

    return middlewares;
  }
}

2.6 环境特定配置

// webpack.dev.js - 开发环境
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    static: './dist',
    hot: true,
    port: 8080
  }
});

// webpack.prod.js - 生产环境
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

3. 常见问题解决

3.1 静态资源404

确保正确配置了static.directory，并且在HTML中正确引用资源。

3.2 HMR不工作

检查是否启用了hot: true，并且在入口文件中添加了HMR支持：

// index.js
if (module.hot) {
  module.hot.accept();
}

3.3 跨域问题

使用proxy配置解决API跨域问题。

3.4 文件更改不触发重新编译

检查watchFiles配置或文件系统权限。

这样配置后，你就可以通过npm start或npm run dev启动开发服务器，并通过npm run build构建生产版本。