Webpack ayıklamak için metin eklentisi çıktılama .js ve .css dosyası girişler

Question

Bir prod kurmak için webpack yapılandırmamın bir tane JS, diğeri SCSS için olmak üzere iki giriş noktası olmasını istiyorum ve bunların iki ayrı çıktı olmasını istiyorum. dosyalar (bir JS, bir CSS). Ancak, extract-text-webpack-plugin iki JS dosyası ve bir CSS dosyası oluşturuyor; yani SCSS için giriş noktası, hem istenen CSS dosyasını hem de istemediğim bir JS dosyasını üretiyor. Bu kullanılmayan JS dosyası, webpack boilerplate ve // removed by extract-text-webpack-plugin'dan başka hiçbir şey içermiyor. Yani işi iyi yapıyor ama yine de bu gereksiz dosyayı yaratıyor. Benim webpack yapılandırma (ilgili olan parçalar gösteriliyor) olduğu:

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     app: './client/src/app.js', 
     style: './client/src/app.scss' 
    }, 
    output: { 
     path: __dirname + '/server/assets/', 
     publicPath: '/', 
     filename: 'bundle.[chunkhash].js', 
    }, 
    module: { 
     loaders: [{ 
     test: /\.js/, 
     exclude: /node_modules/, 
     include: /src/, 
     loader: 'babel-loader' 
     },{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style', 'css', 'sass'), 
     },{ 
     test: /.*\.(woff|woff2|eot|ttf)$/i, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff" 
     },{ 
     test: /.*\.(png|svg|jpg)$/i, 
     loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 
     ] 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('bundle.[chunkhash].css', { 
     allChunks: true 
     }) 
    ] 
}; 

Yani esasen çıkış iki .js dosyaları, her giriş için bir tane oluşturmak ve daha sonra özü eklentisi gerçek istenen .css dosyası oluşturuyor. Çıktının bu gereksiz dosyayı oluşturmasını nasıl engelleyebilirim?

Answer 1

sizin webpack yapılandırmasındaki style giriş noktası çıkarın: Sonra

module.exports = { 
    entry: { 
    app: './client/src/app.js' 
    }, 
    // ... 
} 

require bunu sizin app.js dosyadan:

// app.js 
require('./app.scss'); 
// ... 

Answer 2

başka seçenekler birine app ve style parçalarını birleştirmek geçerli:

entry: { 
    app: [ 
     './client/src/app.js', 
     './client/src/app.scss' 
    ] 
} 

Bu şekilde webpack yalnızca bir parça üretecek - app. Aynı zamanda ExtractTextPlugin, ondan .scss modülünü kaldıracaktır. İçindekiler bundle.[chunkhash].css'a yerleştirilecektir.

Answer 3

Ek dosyaları son çıktı boyutlarına göre kaldırmak için bir webpack plugin araya koydum - bu dosyalar çok küçük olma eğilimi gösterdiği için, sadece ne kadar büyük olduklarını denetleme ve küçük, işe yaramaz olanları kaldırma gibi görünüyor.

sizin webpack.config.js dosyasında npm veya yarn

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

kullanarak yükleyin:

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

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

Sen `gerektiren kullanıyorum üzerine yöntem tercih Webpack Extraneous File Cleanup Plugin Github Page