如何告诉 webpack 不要缩小和打包 js 文件

Posted 2023-02-22

【中文标题】如何告诉 webpack 不要缩小和打包 js 文件

【英文标题】：how to tell webpack that do not minify and pack js files

【发布时间】：2017-04-10 15:49:20

【问题描述】：

我在这个地址使用 vue-cli webpack 样板：

vuejs-templates/webpack

我希望 webpack 不要在开发模式下压缩和打包 js 文件。 如何实现？ 问题是我们有一个巨大的经过测试的 asp.net webforms 应用程序，它已经包含 jquery 和 bootstrap，这是无法绕过的。 我的 jquery 和 bootstrap.js 与 vue 有冲突。我无法在开发模式下调试它们。

【参考方案1】：

你指的是vue-cli webpack boilerplate：https://github.com/vuejs-templates/webpack

如果是这样，生产构建（npm run build）会被 uglify 缩小和破坏。要更改其行为，请转到 build/webpack.prod.conf.js 并编辑 uglify 生产选项。您可以根据自己的需要将其全部删除，即不压缩、不破坏，或将这些选项设置如下：

new webpack.optimize.UglifyJsPlugin(
  compress: false,
  mangle: false,
)

查看 webpack 文档了解更多信息：https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

如果您在打包供应​​商文件时也遇到问题，则此配置位于同一文件中。寻找：

new webpack.optimize.CommonsChunkPlugin(
  name: 'vendor',
  ...
)

但是，如果您不需要它在应用程序中包含 JQuery 或 Bootstrap.js，那么您是否可以避免将它们导入其中？然后只需在您的 html 中分别链接到这 2 个库。

编辑

要解决您对 ESLint 需要 $ 值或您在应用程序之外包含的任何其他全局变量的任何问题，只需编辑您的 .eslint.js 配置文件添加一些全局参数或在 JQuery 的情况下您可以添加 JQuery env 变量：

env: 
    'jquery': true


# or to set global vars that would be available on your apps window, i.e. window.foo
globals: 
  'foo': true
,

查看 eslint 了解更多信息：http://eslint.org/docs/user-guide/configuring

【讨论】：

我已经更新了答案以帮助您解决 eslint 问题。关于您的webpack.dev.conf.js，默认情况下不会压缩，但会添加源映射。但是，如果您修复了 eslint 问题，您可能可以保持原样，因为这些源映射对于加速调试很有用。

你整理好了吗？

是的，您为我指明了正确的方向。本质上，我正在寻找的是调试ES2015 代码，并发现 webpack（和 vue-loader）正在将 *.vue 文件转换为普通的、老式的、浏览器可理解的代码（我说的对吗？）。我改变了我的观点，最有用的部分是你对 global 和 env 部分的解释，这拯救了我的夜晚，在此先感谢。现在我使用源映射，并且在构建生产时需要缩小和丑化。最后，我对 gulp 和 bower、browserify 和 webpack、amd、commonjs、requirejs 等所有概念感到困惑......

不用担心，关于 vue 的解析器所做的是，它会将您编写的模板转换为纯 js。至于关于 SO 的文档，我不确定那里有什么，但我知道你的意思 - 现在应用程序发生了很多事情，需要大量学习。只需继续插入/测试，当然还要检查 webpack 的资源，因为这肯定会清除大多数事情。我要补充的一件事是 vue-cli 是可靠的，所以即使你不知道它的所有工作部分，你也应该能够启动并运行一个很棒的应用程序环境。

@robertotomás 如果你能看到 webpack 在哪里引入 uglify，即new webpack.optimize.UglifyJsPlugin，然后像上面一样传递mangle 选项。如果这不起作用，是不是您正在使用供应商库的缩小（和损坏）版本？因此 uglify 没有做任何事情，文件已经看起来像那样......