javascript - Webpack2 : make external not mandatory for all entry points

Question

鉴于以下现有的webpack.config.babel.js对于该应用程序工作正常，我想添加另一个条目(widget)，但如果我这样做，它需要将所有外部项目加载到我的HTML页面中，即使我的新功能不需要它(google， 传单...)关于申请的这一部分。

widget.js:10488 Uncaught ReferenceError: google 未定义

plugin & resolve & output 现有部分适用于我想添加的新 entry js ，所以这很好。只有外部困扰着我。

解决这个问题的最佳方法是什么？我对 webpack 知之甚少。谢谢。

import path from 'path';
import webpack from 'webpack';
import eslintFormatter from 'eslint-friendly-formatter';

export default (env) => {
  const isProd = env ? !!env.release : false;
  const isVerbose = env ? !!env.verbose : true;

  process.env.NODE_ENV = isProd ? 'production' : 'development';

  return {
    entry: {
      showcase: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/showcase/index.js'),
      // widget: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/widget/index.js'),
    },
    output: {
      path: path.resolve(process.cwd(), 'web/dist/components'),
      filename: '[name].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        Translator: 'node_modules/bazinga-translator/js',
      },
    },
    externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      google: 'google',
      leaflet: 'L',
      translator: 'Translator',
      markerclustererplus: 'MarkerClusterer',
      lodash: '_',
      routing: 'Routing',
    },
    module: {
      rules: [
        {
          test: /\.(js|vue)$/,
          enforce: 'pre',
          include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
          use: {
            loader: 'eslint-loader',
            options: {
              formatter: eslintFormatter,
            },
          },
        },
        {
          test: /\.js$/,
          include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
          use: 'babel-loader',
        },
        {
          test: /\.vue$/,
          use: 'vue-loader',
        },
      ],
    },
    plugins: [
      // Define environment variables
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        },
      }),

      // No compile changes on errors
      ...isProd ? [] : [new webpack.NoEmitOnErrorsPlugin()],

      // JavaScript code minimizing
      ...isProd ? [
        // Minimize all JavaScript output of chunks
        // https://github.com/mishoo/UglifyJS2#compressor-options
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: isVerbose,
          },
        }),
      ] : [],
    ],
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  };
};

Answer 1

Externals 只是假设模块存在的配置，但 webpack 不会调用它本身。可能已经存在的条目与所有外部组件一起加载并且工作正常，没有错误。但是新条目加载时没有加载外部，而新条目 make(或其他一些)调用未加载外部。检查您是否可能有依赖项需要一些外部组件，或者您新添加的条目调用一些外部组件(在第二种情况下实际上未加载)。