使用 Webpack 和 UglifyJsPlugin 的缩小代码不起作用答案

【问题标题】：Minified code using Webpack and UglifyJsPlugin doesn't work使用 Webpack 和 UglifyJsPlugin 的缩小代码不起作用
【发布时间】：2017-07-04 16:33:17
【问题描述】：

我正在尝试将多个文件添加到包中并缩小它。 Webpack 没有给我任何错误，代码被编译和缩小但它不起作用。

我的 webpack 配置：

const path = require('path');
var webpack = require("webpack");

module.exports = {
  entry: {
    app: [
    './js/jquery-2.1.1.min.js',
    './vendor/bootstrap4alpha/js/tether.min.js',
    './vendor/bootstrap4alpha/js/bootstrap.min.js',
    './js/ie10-viewport-bug-workaround.js',
    './vendor/chartjs/Chart.bundle.min.js',
    './vendor/chartjs/utils.js',
    './vendor/spincrement/jquery.spincrement.min.js',
    './js/adminux.js'
  ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      mangle: true
    })
  ]
};

当我在浏览器中运行我的应用程序时，它不起作用并在控制台中给我一个错误：

未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须是包含在 Bootstrap 的 JavaScript 之前。

所以看起来 jquery 不在捆绑包中，但它确实存在。当我在 html 文件中添加 jquery 时，它会使用 tether.min.js 输出下一个错误

【问题讨论】：

仔细检查文件夹结构。我的意思是无论你在哪里保存这些 js 文件。似乎无法从指定位置获取文件。
@SudhansuChoudhary 如果文件路径有任何问题，我可能会收到 webpack 错误

标签： javascript webpack

【解决方案1】：

bootstrap 需要使用$，它不是 webpack 中的全局变量。

您可以改用bootstrap-webpack。

或者使用 webpack ProvidePlugin 来定义一个全局 $:

new webpack.ProvidePlugin({
    // Automtically detect jQuery and $ as free var in modules
    // and inject the jquery library
    // This is required by many jquery plugins
    jQuery: "jquery",
    $: "jquery"
})

【讨论】：