Import Javascript library globally through Webpack

Question

I am trying to remove script tags for javascript libraries from my html and therefore removed underscore.js from the template page.

To replace this, in my index.js (webpack entry point), I have the following

import 'underscore'; 

The size of the received web package of the bundle.js file increases by 50 thousand when I do this, so I know that the library is in bundle.js. However, underlining is not available when I try to use it in the console on a page with the package enabled.

Any thoughts would be appreciated.

 const webpack = require('webpack'); const path = require('path'); const precss = require('precss'); const autoprefixer = require('autoprefixer'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const postcssImport = require('postcss-import'); module.exports = { context: __dirname + '/frontend', devtool: 'source-map', entry: './index.js', output: { filename: 'bundle.js', path: path.join(__dirname, './static'), }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'] } }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&importLoaders=1!postcss') }, ], }, vendor: [ 'underscore', ], plugins: [ new ExtractTextPlugin('si-styles.css'), new webpack.ProvidePlugin({ underscore: 'underscore', }), ], postcss: function(webpack) { return [ postcssImport({ addDependencyTo: webpack }), // Must be first item in list precss, autoprefixer({ browsers: ['last 2 versions'] }), ]; }, }; 

Answer 1

For this you can use this webpack plugin:

 new webpack.ProvidePlugin({ underscore: "underscore" }) 

since there is no need to import the library into the index file of your directory. You will have access to the library by specifying a new entry point to the webpack configuration file. Then you can put all your vendor code in the vendor.js file as follows:

 entry: { main: [ './app/js/main.js' ], vendor: [ 'underscore', 'lodash', 'my-awesome-library!' ] } 

UPDATE: there is a very good tutorial on using webpack in production on egghead.io .. Try checking it out !