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

Question

I'm trying do add multiple files into bundle and minify it. Webpack doesn't give me any error, code is compiled and minified but it doesn't work.

My webpack config:

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
    })
  ]
};

When I run my app in the browser, it doesn't work and give me an error in console:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

So it looks like jquery is not in bundle but it is. When I add jquery in html file, it outputs next error with tether.min.js

Answer 1

bootstrap needs to use the $ , it's not a global variable in webpack.

you can use bootstrap-webpack instead.

or use webpack ProvidePlugin to define a global $:

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