Stack Overflow
Stack Overflow

Questions tagged [webpack-externals]

webpack configuration option to specify dependencies that should be excluded from bundle

If your javascript source code imports jquery

import jquery from 'jquery';

but you do not want to include it into the bundle (and want to use CDN instead), specify it this way:

module.exports = {
  externals: {
    jquery: 'jQuery'
  },
  // ...
};
22 questions
56
votes
3 answers

How to use a library from a CDN in a Webpack project in production

I'd like to use react.min.js from a CDN in production (e.g. https://unpkg.com/react@15.3.1/dist/react.min.js) What is the best way to get Webpack to transform my import React from 'react' statements into const React = window.React instead of…
Andy
  • 7,885
  • 5
  • 55
  • 61
6
votes
1 answer

Externals defined in webpack.config still getting error module not found

I have defined externals in webpack.config for material-ui module.exports = [{ entry: ... output:... externals: { react: { commonjs: "react", commonjs2: "react" }, "material-ui": { commonjs: "material-ui", …
VISHAL DAGA
  • 4,132
  • 10
  • 47
  • 53
5
votes
1 answer

Angular as Webpack External

I'm currently trying to lower build times by externalizing Angular dependencies through Webpack externals. So far, I have achieved this wihout problems for React and other minor libraries. If I just move '@angular/compiler' it also works, however…
Oriol_IL
  • 120
  • 1
  • 14
3
votes
2 answers

Webpack error on lodash load using externals config

i am trying to modify a current project using webpack. On my scripts i am using lodash library but i have also scripts that are not written on ES6 so i load lodash globally using a normal script tag. Based on the webpack documentation i have added…
user1521944
  • 317
  • 1
  • 2
  • 14
3
votes
1 answer

Import webpack externals package in TypeScript with local declaration file

I'm trying to import an external module in my typescript module. In the environment of the web app there already is a module loader and the module "my-lib" is present, which is written in JavaScript and does not ship with a declaration file. So, I…
Florian Bachmann
  • 532
  • 6
  • 14
3
votes
1 answer

Vue ElementUI Webpack externals using CDN

Try to set up project with Vue and ElementUI using webpack4. I want to pull both Vue and ElementUI from CDN so I have below webpack config module.exports = { mode: "development", entry: ["./app.js"], externals: { vue: "Vue", …
PKool
  • 45
  • 1
  • 5
2
votes
1 answer

Is it possible to load webpack externals without using a script tag?

Scenario: I would like to embed React components in a web page as isolated react apps. As an example, lets say a date picker and also a colour picker. I don't want to bundle React, or other common dependencies twice (or as many times as I end up…
Christopher Thomas
  • 382
  • 1
  • 15
2
votes
1 answer

Use html-webpack-externals-plugin for files not in node_modules

does anyone know if there's a way to make this plug-in (https://github.com/mmiller42/html-webpack-externals-plugin) work for my own files, that are not in node_modules? For example: I have some configuration data files in app/js/config/ I want these…
André Engelbrecht
  • 478
  • 5
  • 20
2
votes
2 answers

How can I create a configuration file for react and prevent webpack bundling it?

I added a config.json to application. in webpack.config.js I defined Config externals: { 'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json')) }, in application I required config and used it var…
Barny
  • 383
  • 1
  • 3
  • 13
1
vote
1 answer

webpack doesn't bundle node modules

I want to require a module from node_modules and I want to bundle it (for test purposes), but Webpack behaves as if it is added to externals. // no externals or any plugin used let config = { mode: 'none', target: 'node', entry: { …
Sh eldeeb
  • 1,589
  • 3
  • 18
  • 41
1
vote
0 answers

Webpack externals from CDN for a UMD application

I am trying to configure Webpack externals so that some of my deps don't end up in the bundle of my UMD application. I've read the doc about external CDN https://webpack.js.org/configuration/externals/ , however I have the impression that the option…
Karly
  • 389
  • 2
  • 7
  • 25
1
vote
1 answer

Angular `build` throw error for externals decaled with `webpack`

In my angular, I am loading jquery from extranal and it works. But, after the build, I am getting an error Uncaught ReferenceError: jQuery is not defined . My build downloads the jquery, mind you. Question: How can I map the jquery with my…
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
1
vote
1 answer

Sharing i18next instance between applications without override

I'm currently working on internationalizing a system built with single-spa (microfrontends) with applications written on Angular and React. I started using i18next and it's going pretty well, however, I've found a problem when trying to share the…
Oriol_IL
  • 120
  • 1
  • 14
1
vote
2 answers

Sharing libraries among angular micro app elements

I have an micro app element and a shell app which works fine normally. However, I'm trying to build the micro app without the common libraries and refer to them from the global scope. I followed the following tutorial Building angular elements with…
vish78
  • 13
  • 5
1
vote
1 answer

Using webpack externals causes 'require is not defined' error in browser

I'm trying to develop a custom react component and I want to publish it on npm later. I've got the following webpack config: var path = require('path'); module.exports = (env, args) => { entry: './src/index.js', output: { path:…
Marcel Kirsche
  • 445
  • 4
  • 11
1
2