使用Webpack单独打包指定JS文件的完整指南

在中，我们将深入探讨如何使用 Webpack 单独打包指定的 JavaScript 文件，满足特定需求，例如独立配置文件或依赖项的分离部署。以下是一种实现这一目标的具体方法：

1. 配置文件设置

在 Webpack 配置文件中，我们需要增加一个新的 入口点。默认情况下，Webpack 只有一个入口文件，但为了单独打包特定文件，我们可以为 src/config/ip.js 创建一个新的入口点。

entry: {
  app: APP_FILE, // 应用主入口文件
  ip: IP_FILE // 指定要单独打包的 JS 文件
},

2. 公共 chunk 处理

单独设置入口点不足以防止 Webpack 将 ip.js 作为模块处理，这可能导致错误。我们可以借助 CommonsChunkPlugin 将 ip.js 视为公共 chunk：

new webpack.optimize.CommonsChunkPlugin({
  name: 'ip',
  minChunks: Infinity
}),

3. 文件压缩与可编辑性

使用上述方法打包的文件会被压缩，不利于后期修改。为解决此问题，可以去除生产环境优化（如 UglifyJsPlugin），或使用 CopyWebpackPlugin 复制文件而非编译。

new CopyWebpackPlugin([
  { from: './src/config/ip.js', to: 'ip.js' }
]),

4. 防止缓存问题

在 HTML 文件中手动引入 ip.js 并添加随机后缀，防止缓存：

[removed][removed]

5. publicPath 注意事项

为了避免相对路径带来的路由问题，在 index.html 中添加 <base href="/">，确保所有相对路径解析到根路径。

总结：通过配置多个入口点、公共 chunk 插件、CopyWebpackPlugin 结合 publicPath 设置，可以实现单独打包指定 JavaScript 文件的需求。此方法虽然复杂，但在特定需求下非常实用。