问题标签 [webpack-externals]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
34029 浏览

webpack - 如何在生产中的 Webpack 项目中使用 CDN 中的库

我想react.min.js在生产中使用 CDN(例如https://unpkg.com/react@15.3.1/dist/react.min.js

让 Webpack 将我的import React from 'react'语句转换成const React = window.React而不是构建node_modules/react到包中的最佳方法是什么?

我一直在这样做resolve.alias

index.html

webpack.prod.config.js

getWindowReact.js

注意:在老问题中,我没有意识到将 React 构建到 Webpack 包中NODE_ENV=production会去掉propTypes检查。答案之一集中在这一点上。

0 投票
1 回答
922 浏览

javascript - Webpack 外部配置 - 根密钥

它是什么意思,root在 Webpack外部配置中有什么用?

0 投票
1 回答
5637 浏览

webpack - 在 webpack.config 中定义的外部仍然得到错误模块未找到

我在 webpack.config 中为 material-ui 定义了外部

仍然是它给出的错误,例如-

无法解析模块“material-ui/IconButton”......

在我的条目 js 文件中,我有

0 投票
0 回答
563 浏览

reactjs - 如何使用 webpack 准备反应组件作为外部包?

我在 github 上托管了 react 组件,它是一个简单的包装器<table>,功能很少。我使用 webpack 来构建我的项目。这是继承后的 webpack 配置react-create-app

现在,当我在另一个项目中使用我的组件(作为来自 github 的外部包)时,我收到了与该问题相关的警告:https ://facebook.github.io/react/warnings/dont-call-proptypes.html 。

如果我externals从 webpack 配置中删除一切正常,但我的输出文件大约为 130kB(原文如此!)。在externalswebpack 配置中,react 被排除在 index.js 之外,它的重量约为 35kB(未缩小)。但我收到警告:/

我想知道如何从构建中排除反应并减轻警告。我不会以任何不寻常的方式使用 PropTypes,因此来自https://facebook.github.io/react/warnings/dont-call-proptypes.html的建议不相关。

我只想让用户导入我的组件并假设他们已经在依赖项中做出反应......

0 投票
2 回答
706 浏览

reactjs - 如何创建一个配置文件来响应并防止 webpack 捆绑它?

我在应用程序中添加了一个 config.json。

在 webpack.config.js 我定义了 Config

在应用程序中我需要配置并使用它

但是,webpack 将我的配置文件捆绑到 index.js(我的 webpack 输出文件)中,我不想要这个。我想让我的 config.json 与 index.js 分开为了实现这一点,我排除了我的 config.json 但它不起作用。

如果我错过了什么,你能帮我吗?谢谢

0 投票
1 回答
527 浏览

reactjs - 路由块在每个块中捆绑外部脚本

在我的 webpack 中,我使用了具有 React、React Dom、Redux 等的外部组件。

现在,当我实现路由分块时,生成的每个块都会再次重新捆绑外部脚本,所以最终我的包大小非常大。

如何避免我的各个块不重新捆绑外部脚本并从外部使用它们。

编辑

使用https://chrisbateman.github.io/webpack-visualizer/我可以看到我所有的块都捆绑了公共库——这些库实际上应该来自externalswebpack。

编辑 2

网页包文件

路由文件

0 投票
1 回答
42 浏览

node.js - webpack:将带有所需外部组件的 nodejs 服务器包弹出到独立目录中

我更高的目标是创建一个包含服务器包和所有需要的资产的 .zip 文件。然后可以将该文件移动到另一个设备并在那里执行(另一个设备安装了相同的 NodeJS 版本)。在设备上构建它不是一种选择,因为它是离线的。

我目前的解决方案是手动挑选和复制外部模块,既不扩展也不方便。

是否有可能让 webpack 为我处理这个问题?甚至将诸如 express 之类的外部组件捆绑到包本身中。

0 投票
1 回答
2444 浏览

webpack - 使用 CDN 的 Vue ElementUI Webpack 外部

尝试使用 webpack4 使用 Vue 和 ElementUI 设置项目。我想从 CDN 中提取 Vue 和 ElementUI,所以我有以下 webpack 配置

我的 html 文件

我的 app.js 有根 Vue 实例

计数器组件在下面

当我在浏览器中打开应用程序时,出现以下错误

external_"ElementUI":1 Uncaught ReferenceError: ElementUI is not defined at this line in webpack generated js file module.exports = ElementUI;

我有什么遗漏吗?Vue 外部工作没有任何问题,只有元素 UI 有问题

0 投票
1 回答
3179 浏览

typescript - 使用本地声明文件在 TypeScript 中导入 webpack 外部包

我正在尝试在我的打字稿模块中导入一个外部模块。在 web 应用程序的环境中,已经有一个模块加载器,并且存在模块“my-lib”,它是用 JavaScript 编写的,不附带声明文件。

所以,我想要这个库,但在本地有模块声明(因为我是目前唯一在这种情况下使用 TypeScript 的人)。

我尝试使用typeRootsin设置声明文件的搜索路径tsconfig.json。这适用于/// <reference types="my-lib" />,但不适用于import "my-lib";。只有当我将@types文件夹放在node_modules文件夹中时,模块解析才会找到并导入它。

有什么方法可以设置它,这样我就不需要放在@types文件node_modules夹中了?

tsconfig.json:

@types/my-lib/index.d.ts:

src/entry.ts:

webpack.config.js:

0 投票
1 回答
295 浏览

webpack - 对不在 node_modules 中的文件使用 html-webpack-externals-plugin

有谁知道是否有办法让这个插件(https://github.com/mmiller42/html-webpack-externals-plugin)适用于我自己的文件,这些文件不在 node_modules 中?

例如:我在 app/js/config/ 中有一些配置数据文件我希望将这些文件从所有包中排除,复制到输出(dist)文件夹并在运行时从那里读取,这正是这个插件可以,但对于 node_modules 中的文件。

我设法让它复制一个测试文件并在 index.html 中插入脚本标记,但 test.js 文件的内容仍然捆绑并从那里读取。这是我的实验配置:

任何帮助将不胜感激!