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

标签 webpack vue.js webpack-dev-server

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

vuejs-templates/webpack

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

最佳答案

您指的是 vue-cli webpack 样板文件: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 中分别链接到这两个库。

编辑

要解决 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 - 如何告诉 webpack 不要缩小和打包 js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40818618/

相关文章:

javascript - Webpack - typescript 热模块重新加载 [awesome-typescript-loader]

webpack - 如何使用 webpack 和 post css 抑制警告

带有 Webpack 的 Angular - loadChildren 找不到模块

typescript - 使用 webpack 导入 UMD 构建模块会导致关键依赖错误

javascript - 在 contenteditable 父 div 中的 div 上附加 keydown 事件监听器不起作用?

javascript - 在 data() 方法中读取时,VueJS prop 未定义

node.js - 我目前正在安装 "npm install --save dev webpack webpack-dev-server"但我遇到了这个问题

javascript - 重写 Webpack 代理 URL

webpack - ES6 和窗口/全局变量

javascript - 尝试使用 VueJS 插值从嵌套对象的属性检索值时出错