Webpack 缩小 -p 错误答案

【问题标题】：Webpack minification -p errorsWebpack 缩小 -p 错误
【发布时间】：2015-06-19 10:40:50
【问题描述】：

我正在使用 webpack 使用 minifcation 测试我的生产 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' },
    ],
  },
};

谢谢

【问题讨论】：

警告文本实际上是不言自明的。他们都没有引用你的代码，不是吗？
我想我没有解释清楚，但警告没有任何意义。在没有 -p 标志的情况下运行 webpack 会创建一个没有任何错误的 client.js 包。例如，“未使用变量 React 初始化的副作用”... React 是我正在使用的核心库之一。不知道 React 是如何被使用的。
那些不是错误，那些是警告。您的包已编译并可以使用。 “不知道它是如何确定 React 未被使用的” --- 它被使用，但不是在任何地方都有对它的引用。
所以我打开了一个引用github.com/yahoo/fluxible/blob/master/lib/Fluxible.js#L12 的文件@ 变量React 没有在文件中的任何地方使用，因此它可能被（并且被）删除了。那么？
在浏览器控制台中我在缩小后得到的错误是Uncaught TypeError: Cannot read property 'getState' of undefined。这才是真正的问题。这个错误指的是我写的一个类。在缩小破坏我的捆绑之前，这绝对是定义的。

标签： javascript node.js webpack

【解决方案1】：

您看到的警告是由于加载程序正在解析您的 node_module 依赖项。因为你唯一排除的是匹配 /node_modules/(?!react-router)/

不要对模块加载器使用exclude 选项，而是尝试仅将您要使用include 加载的模块列入白名单

exclude 应该用于排除异常尽可能选择include 以匹配目录

【讨论】：