2016-05-24 6 views
6

हाय मैं एक webpack config है के लिए एक फ़ाइल बनाने:हटाएं या नहीं webpack में प्रत्येक प्रविष्टि के इन प्रवेश द्वारों के साथ

entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app':  './src/app.ts', 
    'css': './src/css/main.unique.scss', 
    'index': './src/index.unique.html', 
    }, 

मेरे webpack एक [name].bundle.js और प्रत्येक प्रविष्टि के लिए एक [name].map पैदा कर रही है।
यह पहली 3 जावास्क्रिप्ट प्रविष्टियों के लिए समझ में आता है लेकिन सीएसएस और सूचकांक प्रविष्टियों अपने मुख्य सीएसएस फ़ाइल और अपने मुख्य html फ़ाइल जो बाद में ExtractTextPlugin

द्वारा इलाज के प्रसंस्करण के लिए सिर्फ इसलिए निर्माण मैं के बाद कर रहे हैं

webpackJsonp([1],[ 
/* 0 */ 
/***/ function(module, exports) { 

    // removed by extract-text-webpack-plugin 

/***/ } 
]); 
//# sourceMappingURL=css.map 

मैं कैसे को webpack बता सकते हैं नहीं कुछ प्रविष्टियों के लिए फ़ाइलों का निर्माण: मीटर css.bundle.js और css.map जैसे कुछ कचरा जो केवल शामिल साथ फंस रहे हैं? (सीएसएस/सूचकांक की तरह)
या वैकल्पिक रूप से संकलन के बाद उन बेकार फ़ाइलों को हटाने के लिए?

अग्रिम धन्यवाद

उत्तर

8

में मैं एक साथ (नीचे दिए गए कोड) को हैक कर लिया एक SuppressEntryChunksPlugin कि, इन बेकार बंडलों के उत्पादन में छोड़ देता है अगर आप इसे बताओ जो बंडल बेकार हो जाएगा। इस तरह से अपनी webpack.config.js में यह प्रयोग करें:

var SuppressEntryChunksPlugin = require('./SuppressEntryChunksPlugin'); 
... 
    entry: { 
    'app': './src/app.ts', 
    'css': './src/css/main.unique.scss', 
    'index': './src/index.unique.html', 
    }, 
    plugins: [ 
    // don't output the css.js and index.js bundles 
    new SuppressEntryChunksPlugin(['css', 'index']) 
    ] 

अस्वीकरण: यह extract-loader और फ़ाइल-लोडर के साथ मिलकर मेरे लिए काम करता प्रविष्टियों से सीएसएस/HTML निकालने और उत्पादन में फ़ाइलों को लिखने के लिए। मैं ExtractTextPlugin साथ यह परीक्षण नहीं किया। (यह webpack-देव-सर्वर के साथ काम करता है। और यह सफलतापूर्वक बाहरी sourcemaps को दबाने के लिए आप उन्हें उपयोग कर रहे हैं लगता है। मैं इसे दोनों Webpack 1.13 और 2.2.1 के साथ उपयोग किया है।)

// SuppressEntryChunksPlugin.js 

function SuppressEntryChunksPlugin(options) { 
    if (typeof options === 'string') { 
    this.options = {skip: [options]}; 
    } else if (Array.isArray(options)) { 
    this.options = {skip: options}; 
    } else { 
    throw new Error("SuppressEntryChunksPlugin requires an array of entry names to strip"); 
    } 
} 

SuppressEntryChunksPlugin.prototype.apply = function(compiler) { 
    var options = this.options; 

    // just before webpack is about to emit the chunks, 
    // strip out primary file assets (but not additional assets) 
    // for entry chunks we've been asked to suppress 
    compiler.plugin('emit', function(compilation, callback) { 
    compilation.chunks.forEach(function(chunk) { 
     if (options.skip.indexOf(chunk.name) >= 0) { 
     chunk.files.forEach(function(file) { 
      // delete only js files. 
      if (file.match(/.*\.js$/)) { 
      delete compilation.assets[file]; 
      } 
     }); 
     } 
    }); 
    callback(); 
    }); 
}; 

module.exports = SuppressEntryChunksPlugin; 

इसके अलावा, मैं कर रहा हूँ जो कुछ भी "webpack विशेषज्ञ" के विपरीत है, इसलिए वहाँ लगभग निश्चित रूप से यह करने के लिए एक बेहतर तरीका है। (शायद कोई इसे वास्तविक, प्रकाशित वेबपैक प्लगइन में बदलना चाहेगा, परीक्षण और क्या नहीं?)

+0

ओह विकल्पों की पूरी सूची देख सकते हैं, आप में से एक नरक कर रहे हैं webpack हैकर, दोस्त :) साझा करने के लिए धन्यवाद! आपने मुझे बाल का एक सभ्य गुच्छा बचाया :) –

+0

यह मेरे लिए काम नहीं कर रहा है: '( – NealVDV

+0

@NealVDV उसे सुनकर खेद है। वेबपैक का कौन सा संस्करण? निकालने वाला लोडर? यह कैसे असफल रहा है, या क्या गलत हो रहा है? – medmunds

0

मैंने अपने आउटपुट आकार के आधार पर अतिरिक्त फ़ाइलों को निकालने के लिए webpack plugin को एक साथ रखा है, यह उनके नाम पर आधारित है - यह है मेरे लिए एक छोटे से अधिक भविष्य सबूत गया के रूप में मैं अपने webpack config करने के लिए अतिरिक्त प्रवेश बिंदुओं को जोड़ने के लिए जारी है।

npm या yarn

npm install webpack-extraneous-file-cleanup-plugin --save-dev 
yarn add webpack-extraneous-file-cleanup-plugin --dev 

का उपयोग कर स्थापित करें अपने webpack.config.js फ़ाइल में:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin'); 

module.exports = { 
    ... 
    plugins: [ 
    new ExtraneousFileCleanupPlugin({ 
     extensions: ['.js'] 
    }) 
    ] 
} 

आप पर Webpack Extraneous File Cleanup Plugin Github Page

संबंधित मुद्दे