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

Webpack includes unused library in bundle.js

本文关键字:未使用 js 包含 bundle Webpack      更新时间:2024-01-25

我不明白为什么。。。

包括100K字节的未使用库:

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

我将es6babelreact一起使用,代码运行良好,只是试图缩小包。

还使用了使用httphttps的交叉库(节点/浏览器),但我认为这不是问题所在。

从webpack1迁移到webpack2时,我遇到了类似的问题。束大小从125kb增加到164kb(最小化)。

看起来主要部分采用了缓冲库,该缓冲库可能来自css加载器,并添加了源映射支持。

我打开了一期https://github.com/webpack-contrib/style-loader/issues/194看起来简单的解决方法是将CCD_ 7添加到webpack配置中。更多信息,请访问:https://webpack.js.org/configuration/node/