Webpack 压缩 -p 错误

Question

我正在使用webpack进行生产环境JavaScript代码的测试，并进行了代码压缩。在未压缩的情况下，一切正常，但是当我添加-p标志时：

NODE_ENV=production ./node_modules/webpack/bin/webpack.js -p --progress --colors

我会尽力帮助您进行翻译，以下是您需要翻译的内容：

我收到了警告，还有一些javascript错误。看起来它正在删除不应该删除的东西。无法弄清原因。

警告：

WARNING in client.js from UglifyJs
Side effects in initialization of unused variable React [./~/fluxible/lib/Fluxible.js:12,0]
Dropping unused function $$$enumerator$$makeSettledResult [./~/fluxible/~/es6-promise/dist/es6-promise.js:361,0]
Side effects in initialization of unused variable $$utils$$now [./~/fluxible/~/es6-promise/dist/es6-promise.js:35,0]
Side effects in initialization of unused variable $$utils$$o_create [./~/fluxible/~/es6-promise/dist/es6-promise.js:38,0]
Dropping unused variable internals [./~/react-router/~/qs/lib/utils.js:6,0]
Dropping side-effect-free statement [./~/fluxible/addons/provideContext.js:6,0]
Side effects in initialization of unused variable Action [./~/fluxible/~/dispatchr/lib/Dispatcher.js:7,0]
Dropping unused variable internals [./~/react-router/~/qs/lib/index.js:9,0]

这是我的webpack.config.js文件

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


module.exports = {
  entry: [
    './client.js',
  ],

  output: {
    path: path.join(__dirname, 'assets'),
    filename: 'client.js',
    publicPath: '/assets',
  },

  plugins: [
    new ExtractTextPlugin('styles.css'),
  ],

  module: {
    loaders: [
      { test: /\.(js|jsx)$/, exclude: /node_modules\/(?!react-router)/, loader: 'react-hot!babel-loader?stage=0' },
      { 
        test: /\.scss$/, 
        loader: ExtractTextPlugin.extract(
                    // activate source maps via loader query
                    'css?sourceMap!' +
                    'sass?sourceMap'
                )
      },
      // bootstrap
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-eot',
      },
      {
        test: /\.(woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff2',
      },
      { test: /\.js$/, include: /node_modules\/bootstrap/, loader: 'imports?jQuery=jquery' },
    ],
  },
};

谢谢

- captainill

---

我想我没有解释清楚，但警告没有任何意义。在没有-p标志的情况下运行webpack会创建一个client.js捆绑包，没有任何错误。例如，“未使用变量React的初始化中存在副作用”... React是我正在使用的核心库之一。不知道它如何确定React未使用。 - captainill

在浏览器控制台中，我在缩小后得到的错误是 Uncaught TypeError: Cannot read property 'getState' of undefined。这才是真正的问题。这个错误指向了我写的一个类。在缩小打包之前，这个类肯定是已经定义好了的。 - captainill

您可以在Heroku上查看应用程序运行，没有任何错误 https://fluxible-salad.herokuapp.com/。这是使用未压缩的client.js捆绑包。 - captainill

在主分支上它是一个函数 https://github.com/yahoo/fluxible/blob/master/addons/connectToStores.js#L18。那部分工作得很好，直到我用 -p 进行捆绑。我现在打算将其保留为非最小化版本，只是为了准备以后当我想要缩减体积时。 - captainill

然后我会使用调试器在运行时调试被压缩过的代码版本，特别是这一行：https://github.com/yahoo/fluxible/blob/master/addons/connectToStores.js＃L44 - zerkms

Answer 1

你看到的警告是由于加载器正在解析你的 node_module 依赖项。因为你排除的只有与 /node_modules/(?!react-router)/ 匹配的内容。

不要使用模块加载器的 exclude 选项，尝试只使用 include 白名单加载你想要加载的模块。

当可能匹配目录时，请尽量使用 include，而将 exclude 用于排除异常情况。

- Sitian Liu