Webpack最佳配置指南

Webpack 的最佳配置写法，真的蛮实用。你如果也遇到过打包慢、文件体积大、不知道该用哪些 Loader 和 Plugin，那这篇文章你得好好看看。嗯，讲得清楚，也有挺多实战例子。

入口配置是 Webpack 的起点，简单说就是告诉 Webpack 从哪开始找你的代码。entry: './index.js'是最基础的写法，适合单页应用。如果是多页项目，多入口就派上用场了，配置成对象，每个页面一个入口，像这样：

entry: {
  index: './index.js',
  admin: './admin.js'
}

入口文件多了，手写挺烦的？可以用glob库自动找文件，灵活又省心。

出口配置决定打包后文件去哪。路径用path.resolve()拼接，文件名支持占位符，比如[name]、[chunkhash]，方便区分模块和缓存优化：

output: {
  path: path.resolve(__dirname, '../dist/build'),
  filename: '[name].bundle.js',
  chunkFilename: '[name].[chunkhash].bundle.js',
  publicPath: '/'
}

别忘了加publicPath，CDN 部署时资源路径不对，那真是调到怀疑人生。

其他关键配置也挺重要。mode控制是开发环境还是生产环境，Webpack 会自动帮你优化策略。resolve用来写别名，路径就不用一层一层跳。像module配置rules就能加载 CSS、图片、字体等资源。

plugin部分就更有意思了，比如HtmlWebpackPlugin可以自动生成 HTML 文件，不用你手动引入脚本。还有压缩插件TerserPlugin，让你的代码变瘦不少。

如果你还没配上source map，那调试可太痛苦了。加上它，哪出错一目了然。，别忘了看看performance提示，Webpack 会提醒你文件是不是太大，挺贴心。

如果你对 Webpack 配置还不熟，建议先抄这份配置，用熟了再根据项目慢慢微调。也可以看看下面这些相关文章，针对多入口、React/Vue 项目都有讲。