npm install --save-dev file-loader url-loader
# 或使用Webpack5的资源模块（推荐）方法一：使用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/'
}
}
]
}npm install --save-dev webpack-dev-server// 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': ''
}
}
}
}
};// 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'
}
};{
"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"
}
}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;
}
}// 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'
});确保正确配置了static.directory，并且在HTML中正确引用资源。
检查是否启用了hot: true，并且在入口文件中添加了HMR支持：
// index.js
if (module.hot) {
module.hot.accept();
}使用proxy配置解决API跨域问题。
检查watchFiles配置或文件系统权限。
这样配置后，你就可以通过npm start或npm run dev启动开发服务器，并通过npm run build构建生产版本。
