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

Question

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

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

Answer 1

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

如果是这样，生产构建 (npm 运行构建) 被缩小并被 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，那么您是否可以避免将它们导入其中？然后简单地 link 到你的 html.

中的那两个库

编辑

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

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

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

how to tell webpack that do not minify and pack js files

webpack

vue.js

webpack-dev-server