Webpack2：对所有入口点都不强制外部

Question

Given the following existing webpack.config.babel.js that's working fine for this application, I would like to add another entry ( widget ), but if I do so, it requires all external items to be loaded in my HTML page even when I don't need it with my new feature ( google , leaflet ...) on this part of the application.

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

The plugin & resolve & output existing sections are applying to the new entry js I want to add, so it's good. Only the external is bothering me.

What's the best way to resolve this ? I have very little knowledge of webpack. Thanks.

 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 is only configuration suppose modules will be exists but webpack does not call it itself. It is possible alredy existed entry loaded togather with all externals and worked fine with no errors. But new entry loaded without loading externals and new entry make (or some else) call not loaded externals. Check you possible have dependencies requiers some externals or your newely added entry make call some of externals (which actually is not loaded in second case).