javascript - Webpack 在 bundle.js 中包含未使用的库

Question

我不明白为什么...

包括 100Kbytes 的未使用库:

/*!
 * 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/