在开发和生产模式下运行Webpack时为什么复制文件不同？

Question

我有一个javascript文件，它不是我的项目的一部分，但是当它被服务时，需要与它捆绑在一起。这个文件的内容基本上在形式上.

FT.manifest({
   "foo": "bar",
   "id": 3
})

...where对象部分是格式良好的JSON。

我让webpack设置并使用copy-webpack-plugin将该文件与所有打包的JS和其他资产一起移动到我的./dist文件夹中。

没什么稀奇的，只是一份直截了当的文件。

new CopyWebpackPlugin({
   patterns: [
      {from:`./src/templates/${dirName}/manifest.js`, to: `${dirName}/manifest.js`},
   ]
})

当我在开发模式下运行webpack时，这样做很好，复制的文件看起来与原始文件完全相同，但是当我在生产模式下运行时，内容被内联，失去了对象部分中键周围的语音标记。输出现在看起来是这样..。

FT.manifest({foo:"bar",id:3})

注意foo和id上缺少语音标记。当--mode=production删除换行和其他格式(这很好)时，显然会发生一些优化，但它也会去掉语音标记，这会给行后发生的一些步骤带来问题。

那么，您能告诉我为什么会发生这种情况吗?在复制过程中，我可以阻止这个特定的文件被优化。

我不能对特定文件的格式做任何事情，因为它是来自第三方的，但是如果需要的话，我可以使用其他插件或者更改我的进程。

谢谢你的帮忙

Answer 1

我认为如何将某些文件排除在“生产”优化过程之外的问题是一个有效的问题，但我的想法是，我的具体问题更多地是与我笨拙的解决方案有关，而不是任何其他问题。我找到了一种更快更优雅的方法。

我所做的是使用copy-webpack-plugin将文件从我的./src移动到我的./dist，然后读取它们并在它们发出后对它们进行操作，这增加了一整套文件系统操作，并要求将js文件作为字符串读取，并将对象部分提取出来并转换为JSON (在对文件进行优化和去掉语音标记之后，JSON就会失败)。

我所了解到的是，copy-webpack-plugin本身允许您在复制文件数据时对其执行转换。这意味着您获得了原始的数据，并且可以取消重新读取和转换最终发出的文件的整个过程。

{
   from:`./src/${dirName}/myFile.js`,
   to: `${dirName}/myFile.js`,
   transform:{
      transformer(content, absolutePath){
         let str = content.toString();
         // Make changes to str here and return the amended data
         return str;
      }
   }
}

对大多数人来说，这些都在插件文档中可能并不新鲜，但我不知道你能做到这一点。也许其他人会发现它有用。