Importare la libreria Javascript in tutto il mondo tramite Webpack

Question

Sto cercando di rimuovere i tag di script per le librerie javascript dal mio html e così ho rimosso underscore.js da una pagina di modello.

di sostituire questo, dentro le mie index.js (webpack punto di ingresso), ho il seguente

import 'underscore'; 

La dimensione del webpack emesso bundle.js aumenta di file da 50k quando faccio questo, così ho sappi che la libreria è in bundle.js. Tuttavia, il carattere di sottolineatura non è disponibile quando provo ad usarlo nella console su una pagina che include bundle.js.

Ogni pensiero sarebbe apprezzato.

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

Al fine di raggiungere che è possibile utilizzare questo plugin webpack:

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

dal modo in cui non è necessario che si importa la libreria nel file indice della directory. Avrete accesso alla biblioteca specificando anche un nuovo punto di ingresso nel file di configurazione webpack .. Si potrebbe poi mettere tutto il codice fornitore in un boundle vendor.js in questo modo:

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

UPDATE: C'è una buon tutorial su come usare il webpack in produzione su egghead.io .. Prova a check it out!