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

Question

我正在尝试将多个文件添加到捆绑包中并缩小它。 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不在bundle中，但确实如此。当我在html文件中添加jquery时，它会用tether.min.js输出下一个错误

Answer 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"
})