Webpack - _ is not defined

Question

When I run webpack, _ returns as undefined on window: window._ ::: Error: _ is not defined . I thought that putting _ inside the plugins will expose it to window . Is my understanding incorrect?

const webpack = require('webpack');

const plugins = new webpack.ProvidePlugin({
    $: "jquery",
    _: "underscore"
});

module.exports = {
    entry: {
        app: './src/main/app/components/main.module.js',
        vendor: [
            'jquery',
            'underscore'
        ]
    },
    output: {
        filename: './src/main/resources/dist/app/scripts/[name].bundle.js',
    },
    plugins: [plugins],
    devtool: 'inline-source-map'
};

Answer 1

You're trying to add it as a global variable? Try adding this to your .ts / .js file:

window['_'] = require('underscore');

Answer 2

providePlugin is used to make libraries available in the context of other modules in the webpack bundle. For example, this usage of providePlugin :

const plugins = new webpack.ProvidePlugin({
  $: "jquery",
  _: "underscore"
});

will allow access to jquery lib in ./src/main/app/components/main.module.js via the $ variable.

If you want to expose jquery to the window as window.$ , you can either use webpack's expose-loader , or simply update the window in your entry file (main.module.js):

window.$ = $; //$ is defined via providePlugin
window._ = _; //_ is defined via providePlugin

Answer 3

你是否在索引文件中加载了underscore.js？

<script src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>