वेबपैक

Question

के माध्यम से विश्व स्तर पर जावास्क्रिप्ट लाइब्रेरी आयात करें मैं अपने एचटीएमएल से जावास्क्रिप्ट पुस्तकालयों के लिए स्क्रिप्ट टैग को हटाने की कोशिश कर रहा हूं, और इसलिए टेम्पलेट पेज से underscore.js को हटा दिया है।

मेरी index.js (webpack प्रवेश बिंदु) के भीतर इस बदलने के लिए,, मैं निम्नलिखित है

import 'underscore'; 

webpack 50 के द्वारा फ़ाइल बढ़ जाती है bundle.js outputted जब मैं यह कर के आकार, तो मैं पता है कि पुस्तकालय bundle.js में है। हालांकि, अंडरस्कोर उपलब्ध नहीं है जब मैं इसे उस पृष्ठ पर कंसोल में उपयोग करने का प्रयास करता हूं जिसमें bundle.js शामिल है।

किसी भी विचार की सराहना की जाएगी।

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

आदेश प्राप्त करने के लिए है कि आप इस webpack प्लगइन का उपयोग कर सकते हैं: जिस तरह से यह द्वारा

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

है कि आप अपने निर्देशिका की अनुक्रमणिका फ़ाइल में पुस्तकालय आयात आवश्यक नहीं है। आप पुस्तकालय भी अपने webpack कॉन्फ़िग फ़ाइल में एक नई प्रविष्टि बिंदु निर्दिष्ट करने के लिए उपयोग होगा .. तब आप अपने सभी विक्रेता कोड एक vendor.js boundle में इतनी तरह डाल सकता है:

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

अद्यतन: वहाँ एक बहुत है अंडेहेड.io पर उत्पादन में वेबपैक का उपयोग करने के तरीके में अच्छा ट्यूटोरियल .. check it out पर आज़माएं!