2017-05-23 4 views
1

Angesichts der folgenden bestehenden webpack.config.babel.js die für diese Anwendung funktioniert gut, würde Ich mag eine andere entry (widget) hinzufügen, aber wenn ich so tun, bedarf es alle external Artikel zu ladende in meiner HTML-Seite, auch wenn ich es nicht mit meiner neuen Funktion (google, leaflet ...) auf diesem Teil der Anwendung brauche.Webpack2: extern machen nicht obligatorisch für alle Einspeisepunkte

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

Die plugin & resolve & output bestehenden Abschnitte anwenden auf die neue entry js ich hinzufügen möchte, so ist es gut. Nur die external stört mich.

Was ist der beste Weg, um dies zu beheben? Ich habe sehr wenig Ahnung von Webpack. Vielen Dank.

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, 
 
    }, 
 
    }; 
 
};

Antwort

0

Externals ist nur Konfiguration suppose Module vorhanden ist, aber webpack sein macht es sich nicht selbst aufrufen. Es ist schon möglich, dass der Eintrag mit allen externen Daten geladen wurde und fehlerfrei funktioniert. Aber neuer Eintrag geladen ohne Laden von externen und neuen Eintrag machen (oder einige andere) Aufruf nicht geladenen externen. Überprüfen Sie, ob Sie Abhängigkeiten haben, die einige Externals erfordern oder Ihr neu hinzugefügter Eintrag einige Externes aufrufen (was im zweiten Fall nicht geladen ist).

Verwandte Themen