のWebPACKは</p> <p>は、未使用のライブラリーの100Kbytesなどを含む...私は理由を理解していないbundle.js

Question

で未使用のライブラリが含まれています

/*! 
* The buffer module from node.js, for the browser. 
* 
* @author Feross Aboukhadijeh <feross@feross.org> <http://feross.org> 
* @license MIT 
*/ 
... 
... 

私webpack.deploy.config.js私は

'use strict'; 

/* eslint-env node */ 

const webpack = require('webpack'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 

const config = { 
    addVendor: function (name, path) { 
    this.resolve.alias[name] = path; 
    this.module.noParse.push(new RegExp(`^${name}$`)); 
    }, 

    node: { 
    Buffer: false, 
    global: false, 
    process: false, 
    setImmediate: false 
    }, 

    entry: { 
    app: [ 
     './src/main.jsx' 
    ], 
    vendors: [ 
     'jquery', 
     'semantic', 
     'semantic.css', 
     'react', 
     'react-dom' 
    ] 
    }, 

    resolve: { alias: {} }, 

    output: { 
    path: `${__dirname}/build`, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 

    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new CopyWebpackPlugin([{ from: './src/static', to: './' }]), 
    new webpack.optimize.CommonsChunkPlugin('app', null, false), 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }) 
    ], 

    module: { 
    noParse: [], 
    loaders: [ 
     { 
     test: /\.(jsx)?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.(js)$/, 
     loader: 'babel', 
     exclude: [/node_modules/, /bower_components/] 
     }, 
     { 
     test: /\.(css)$/, 
     loader: 'style!css' 
     }, 
     { 
     test: /\.(scss)$/, 
     loader: 'style!css!sass' 
     }, 
     { 
     test: /\.(less)$/, 
     loader: 'style!css!less' 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' 
     } 
    ] 
    } 
}; 

config.addVendor('jquery', `${__dirname}/bower_components/jquery/dist/jquery.min.js`); 
config.addVendor('semantic', `${__dirname}/bower_components/semantic/dist/semantic.min.js`); 
config.addVendor('semantic.css', `${__dirname}/bower_components/semantic/dist/semantic.min.css`); 
config.addVendor('react', `${__dirname}/bower_components/react/react.min.js`); 
config.addVendor('react-dom', `${__dirname}/bower_components/react/react-dom.min.js`); 

module.exports = config; 

es6とbabelとreactを使用すると、コードはうまく動作し、パッケージを小さくしようとしています。

httpとhttpsを使用するクロスライブラリ（ノード/ブラウザ）も使用しますが、問題ではないと思います。

Answer 1

webpack1からwebpack2に移行したときに同様の問題が発生しました。バンドルのサイズは125kbから164kbに（最小化）増加しました。

おそらくcss-loaderから来て、ソースマップのサポートを追加するバッファライブラリを要するようです。

私は問題https://github.com/webpack-contrib/style-loader/issues/194を開けましたが、簡単な回避策のように見えるのは、node: {Buffer: false}をwebpackの設定に追加することです。続きを読む：https://webpack.js.org/configuration/node/