Webpack 单独打包指定 JS 文件：CommonsChunkPlugin 与 CopyWebpackPlugin 方案解析

背景与需求分析

背景

近期遇到一个实际需求：由于前端构建产物访问的后端 IP 地址不确定，需要将项目中的 IP 配置文件独立打包，以便运维人员在部署阶段直接修改该文件。为此，需要采用 Webpack 单独打包指定文件的技术方案。

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: './dist/', //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: '[name].[chunkhash].js', // 输出文件名
 chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
 }
}

publicPath 配置注意事项

补充说明

{

首先讨论 publicPath 的配置。这里有一个关键点：路径应配置为相对路径，例如 ./dist。如果配置为绝对路径 /dist/，当 Nginx 将前端资源部署在非根目录时，index.html 将无法正确访问资源。因此推荐使用相对路径。然而，使用相对路径时存在一个潜在问题：如果项目路由采用 HTML5 模式（即 URL 中不含 # 号），而非 Hash 模式，项目部署可能会失败。Angular 和 React 项目均可能出现此类问题，Vue 项目情况类似。此时的解决方案是在 index.html 的 head 标签中添加 base 标签，具体配置如下：

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <base href="/" rel="external nofollow" >
</head>

}

基于 CommonsChunkPlugin 的打包方案

Webpack 基于模块化设计，通常情况下只需一个入口文件即可满足需求。但针对本次需求，除了默认的 app 入口外，还需新增一个入口文件。配置方式如下：

 entry: {
 app: APP_FILE // 入口文件
 ip: IP_FILE
 },

仅进行上述 Webpack 配置后，dist 目录下会生成 app.xxx.js 和 ip.xxx.js，但项目运行仍会报错。解决方法是：保持 IP 入口文件不变，但将其作为 CommonsChunk 处理。即在 plugins 配置中添加以下代码：

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

这样可以确保优先加载 ip.xxx.js，从而避免报错。

该方案的明显缺点是打包后的文件经过压缩，不利于后续对文件内容进行二次修改（目前未找到解决压缩问题的方法）。

基于 CopyWebpackPlugin 的最终方案

CopyWebpackPlugin

最终采用的解决方案是让 ip.js 脱离项目的模块化系统，并在 index.html 中单独引用。这是最初想到的方案，虽非首选，但在解决前述问题后成为可行路径。

具体解决流程如下：

首先在 Webpack 中引入 CopyWebpackPlugin，并配置相关代码：

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

在 index.html 中单独引入 script 标签，注意需配置一个随机后缀以破坏缓存：

<script>
 document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>

此举旨在防止 ip.js 因浏览器缓存导致更新不及时的问题。

以上步骤即完成了 Webpack 单独打包指定 JS 文件的需求。

注：如有更优方案，欢迎分享。

以上就是 Webpack 单独打包指定 JS 文件的全部内容，希望能对大家有所帮助，欢迎支持本站。