Webpack：重新打包后，Object(...)不是一个函数

Question

我最近在我的Webpack配置中设置了长期缓存，参考了这个链接和这个链接。

现在我有一个小问题：每次我更改一些代码并重新构建时，当Webpack尝试从某个模块导入函数并执行它时，都会出现相同的错误：Object(...) is not a function。

更奇怪的是，当我按下SHIFT+F5时，问题就消失了。

以下是我的Webpack配置：

const path = require('path');
/* eslint-disable import/no-extraneous-dependencies */
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const NameAllModulesPlugin = require('name-all-modules-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
/* eslint-enable import/no-extraneous-dependencies */

const configFileName = `./.env.${process.env.STAGE}.json`;
let envConfig;

try {
  // eslint-disable-next-line import/no-dynamic-require, global-require
  envConfig = require(configFileName);
} catch (e) {
  envConfig = {};
}

const babelSettings = {
  extends: path.join(__dirname, '.babelrc'),
};

const excludes = [
  /node_modules(?![/\\]@shared[/\\])/,
];
const roots = [
  path.join(__dirname, '../../node_modules'),
  path.join(__dirname, 'node_modules'),
  path.join(__dirname, 'client'),
  path.join(__dirname, 'public'),
  path.join(__dirname, 'node_modules/@shared/public'),
];

const getCommonCSSLoaders = enableCSSModules => [
  {
    loader: 'style-loader',
  },
  {
    loader: 'css-loader',
    options: {
      modules: enableCSSModules,
      importLoaders: 1,
      localIdentName: '[local]_[hash:base64:3]',
      minimize: true,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        // eslint-disable-next-line global-require, import/no-extraneous-dependencies
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          env: 'production',
          flexbox: 'no-2009',
        }),
      ],
    },
  },
];

const rules = [
  {
    test: /\.js$/,
    exclude: excludes,
    loader: 'babel-loader',
    options: babelSettings,
  },
  {
    test: /\.css$/,
    exclude: excludes,
    use: [
      ...getCommonCSSLoaders(true),
    ],
  },
  {
    test: /\.css$/,
    include: excludes,
    use: [
      ...getCommonCSSLoaders(false),
    ],
  },
  {
    test: /\.scss$/,
    exclude: excludes,
    use: [
      ...getCommonCSSLoaders(true),
      {
        loader: 'sass-loader',
      },
    ],
  },
  {
    test: /.*\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          name: 'images/[name].[hash].[ext]',
          limit: 20000,
        },
      },
      {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            quality: 80,
          },
          pngquant: {
            quality: '80-90',
            speed: 1,
          },
        },
      },
    ],
  },
];

const plugins = [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      comparisons: false,
    },
    output: {
      comments: false,
    },
  }),
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.NamedModulesPlugin(),
  new webpack.NamedChunksPlugin((chunk) => {
    if (chunk.name) {
      return chunk.name;
    }

    return chunk.modules.map(m => path.relative(m.context, m.request)).join('_');
  }),
  new NameAllModulesPlugin(),
  new ManifestPlugin({
    fileName: 'client-manifest.json',
    publicPath: '/dist/',
  }),
  new webpack.NormalModuleReplacementPlugin(/\/components\/Bundles/, './components/AsyncBundles'),
  new webpack.NormalModuleReplacementPlugin(/\/Bundles/, './AsyncBundles'),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'client',
    async: 'common',
    children: true,
    minChunks: (module, count) => {
      if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
        return false;
      }
      return count >= 3 && module.context && !module.context.includes('node_modules');
    },
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'client',
    children: true,
    minChunks: module => module.context && module.context.includes('node_modules'),
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    minChunks: module => module.context && module.context.includes('node_modules'),
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
      STAGE: JSON.stringify(process.env.STAGE),
    },
    'process.customEnv': {
      api: {
        URL: envConfig.api_url,
        URLV2: envConfig.api_url_v2,
      },
      job_board: {
        URL: envConfig.job_board_url,
      },
      vendors: {
        AMPLITUDE_KEY: envConfig.amplitude_key,
        STRIPE_PUBLISHABLE_KEY: envConfig.stripe_publishable_key,
        OPTIMIZELY_DATAFILE_URL: envConfig.optimizely_datafile_url,
      },
    },
  }),
];

const config = {
  bail: true,
  resolve: {
    modules: roots,
  },
  resolveLoader: {
    modules: roots,
  },
  entry: {
    client: ['./client/src/entry/js/polyfills', './client/src/entry/js/client'],
  },
  output: {
    filename: 'bundles/[name].[chunkhash].bundle.js',
    chunkFilename: 'chunks/[name].[chunkhash].chunk.js',
    path: path.join(__dirname, 'public/dist'),
    publicPath: '/dist/',
  },
  module: {
    rules,
  },
  plugins,
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },
};

module.exports = config;

我会将manifest、vendors和client导入到我的HTML中。 对此有什么见解吗？ 谢谢提前。

- adrienharnay

---

我的两个同事也遇到了这个问题！非常奇怪。如果我们解决了，我会告诉你的。 - Danny Andrews

Answer 1

我们的问题通过从 webpack 配置文件的插件部分中删除 new webpack.optimize.ModuleConcatenationPlugin() 得以解决。可能是它的一个 bug。我们在这个相关的 GitHub 问题中找到了答案：https://github.com/webpack/webpack/issues/5118。

- Danny Andrews