2017-05-23 10 views
1

外部は、このアプリケーションのために罰金働いて、次の既存のwebpack.config.babel.jsを考えると作る、私は別のentrywidget)を追加したいと思いますが、私はそうするならば、それがロードされるように、すべてのexternalのアイテムが必要ですアプリケーションのこの部分で私の新しい機能(googleleaflet ...)を必要としなくても、私のHTMLページにあります。それは良いことだのでWebpack2:すべてのエントリポイントのために必須ではありません

widget.js:10488 Uncaught ReferenceError: google is not defined

plugin & resolve & output既存のセクションでは、私が追加したい新しいentry jsに適用されます。 externalだけが私を悩ませています。

これを解決するにはどうすればよいですか?私は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, 
 
    }, 
 
    }; 
 
};

答えて

0

外観のみの構成と仮定するモジュールが存在しますが、WebPACKのは、それ自体を呼び出すことはありませんでしょうです。 alredyが存在していて、すべての外部でエントリがロードされていて、エラーなく正常に動作している可能性があります。しかし、外部エントリをロードせずにロードされた新しいエントリと、新しいエントリmake(またはその他のもの)は、外部オブジェクトをロードしません。依存関係のリクエスタがいくつかの外部オブジェクトを持っているか、新しく追加されたエントリがいくつかの外部オブジェクトを呼び出すことを確認します(実際には第2のケースではロードされません)。

関連する問題