记第一次使用webpack打包报错

最新推荐文章于 2022-09-28 11:04:28 发布
原创 最新推荐文章于 2022-09-28 11:04:28 发布 · 270 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决Webpack和VueCLI打包时出现警告的方法。使用新版Webpack和VueCLI进行项目打包时，若未指定环境为production或development，将收到警告。文章详细解释了如何通过在命令中加入-o参数来正确配置打包目标，从而避免此类警告，确保打包过程顺利进行。

警告是webpack打包的时候没有设置环境是production还是development。

报错是用的新版的webpack和vue cli。 打包的目标文件前面要加 -o.

加上命令之后成功打包。

WhyTemptFate
关注
逆向使用webpack打包的网站
joker_zsl的博客
01-17 1400
webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和 plugins （插件）对资源进行处理，打包成符合生产环境部署的前端资源。所有的资源都是通过 JavaScript 渲染出来的。最基础最简单的样式：一个自执行方法，方法内部是加载器，入参是要加载的模块；加载器中明显的内容是类似 e[t].call(a.exports, a, a.exports, n)；入参一般是数组或对象，里面是各种函数。
关于使用webStrom工具做webpack打包的问题
扬帆天涯
11-12 1246
{ "name": "meetwebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": {
WebSocket部署到服务器时，出现连接失败的问题解决与分析
热门推荐
evilcry2012的专栏
11-28 3万+
WebSocket部署到服务器时，出现连接失败的问题解决与分析 原创 2017年03月16日 11:27:40 5364 前段时间在本地写的一个WebSocket程序部署到服务器上时出错，做下记录和分析 本地环境是：JDK1.8(32位) Tomcat8.0 服务器环境是:JDK1.8(64位) Tomcat8.0 本地运行是正常的。
webpack打包报错
qq_47888106的博客
09-28 1273
在执行npm run build对项目进行打包的时候遇到webpack打包报错的问题，webpack版本不兼容。
webpack打包报错排查
hyf576501135的专栏
11-29 2151
​ 对于前端webpack的一直停留在使用阶段，有直接前段插件可以直接完成这个部分的工作，因此这个部分一直没有太过关注，直到这次遇到了非了解不可的地步。 ​ 项目在搭建起来后，直接跑起来是没有问题的，第一次打包也没有问题。在开发一段时间后（引入了各种插件和覆写了一些插件内的组件），在本地dev运行是没有问题的，但是打包的时候就报错了，而且报的错看不到，打印了一长串的堆栈但是没有具体指明是哪个文件有问题，只是标识babel（翻译ES6语法到ES5语法的）在打包的时候遇到无法处理的ES6语法。这就很神奇.
webpack打包报错：Invalid configuration object. Webpack has been initialized using a configuration object
m0_56384425的博客
04-25 3539
第一次直接打包没有声名打包存放文件位置，webpack默认存放位置dist/main.js，打包没有报错 第二次打包指定打包文件位置，webpack打包出现报错 报错如下 报错提示找不到__filename这个静态名称，然后去webpack文档查了这个fileneame发现是这样写的，把前面的__删除了就可以了，所以以后遇到报错要找到报错的地方，然后去官网文档查查就可以找到问题了。 ...
【webpack学习】1、webpack打包报错：The ‘mode‘ option has not been set,错误提示如何处理？
闫小样丶的博客
09-11 1362
今天在做项目使用webpack打包工具的时候，一直报各种错误。 https://www.cnblogs.com/wendj/p/10069882.html
webpack打包使用
wangwo1991的博客
06-05 549
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
webpack打包报错 from UglifyJs Unexpected token: operator (>)
ccxh505398633的博客
10-11 7000
一次webpack打包后失败报 ERROR in assets/js/chunk.5.4c9ea1671f8ab4bb1662.js from UglifyJs Unexpected token: operator (>) [assets/js/chunk.5.4c9ea1671f8ab4bb1662.js:5442,43] ERROR in assets/js/chunk.13.4c9...
webpack 打包第三方库_webpack打包之分离第三方类库
weixin_39569753的博客
12-19 475
使用webpack打包工程，通常会需要分离第三方类库和应用本身的代码，因为第三方类库更新频率不高，这样浏览器可以直接从缓存读，不需要项目每次上线再获取一次。以react为例，正常情况下，最初是这么配置的：1 module.exports ={2 entry: {3 app: "./src/App.js",4 vendor: ["react", "react-dom"...
vue项目使用webpack打包的文件过大
zhangxiaodui的博客
10-24 1593
场景 最近被反馈说用vue做的一个官网首次加载很慢，要好多秒，需要进行一下优化，下面说一下我的探索历程。 1.这是中途接手的一个项目，我发现里面有一些本地的第三方库并没有用到或者node modules里已经有了，比如font awesome，bootstrap等，我就把她们删掉了，还有多余的图片也删掉了。 2.从网上搜了方法，把config文件夹下的index.js文件里的productionS...
webpack 用 webpack-parallel-uglify-plugin 加速打包报错
CWW2016的博客
08-21 2773
从新拉了份代码。npm install 、npm run dev 都没有问题，但是npm run build 就报上面的错误了 查了好多资料，都没有解决上面的问题，也不知道是哪里出了问题，但是可以肯定就是打包文件出错了 后面才知道是ParallelUglifyPlugin 加速打包 出错了 。还是要分析报错的原因 1、`warnings` is not a suppor...
electron如何使用webpack打包webview标签中的preload文件
SDFGS54DGF5S4的博客
01-21 3751
注意：本文基于electron-vue项目（在vue2项目上运行vue add electron-builder命令搭建而成） 并在electron8.5.5及9.0.0测试过 在webview中开发者可以使用preload预加载并执行js文件 官方文档 网上以及官方的很多例子都是传入一个相对路径的String，并没有以file://开头。然而我这里只能传入String字符串并且是file协议的，electron会检测是不是以file://开头，不符合就会报错（不知道是不是我配置有问题还是啥…反正只要不以
Abaqus 2024安装教程及下载
最新发布
12-29
Abaqus 2024安装教程及下载
基于Spring Boot框架的大学生体测管理系统的设计与实现源码.zip
12-29
基于Spring Boot框架的大学生体测管理系统的设计与实现源码.zip
FatFs中文资料API函数详解
12-29
先看效果： https://renmaiwang.cn/s/pf9m7 FatFs相关中文资料及全部API函数的应用说明
股票投资预测与市场情绪分析系统_一个结合了机器学习自然语言处理与量化金融模型的综合性开源平台旨在通过分析历史股价数据财务报表宏观经济指标社交媒体情感新闻舆情以及市场突发.zip
12-29
股票投资预测与市场情绪分析系统_一个结合了机器学习自然语言处理与量化金融模型的综合性开源平台旨在通过分析历史股价数据财务报表宏观经济指标社交媒体情感新闻舆情以及市场突发.zip
手机蓝牙控制LED灯设计
12-29
先看效果： https://renmaiwang.cn/s/jkhfz Hue系列产品将具备高度的个性化定制能力，并且借助内置红、蓝、绿三原色LED的灯泡，能够混合生成1600万种不同色彩的灯光。 整个操作流程完全由安装于iPhone上的应用程序进行管理。 这一创新举措为智能照明控制领域带来了新的启示，国内相关领域的从业者也积极投身于相关研究。 鉴于Hue产品采用WiFi无线连接方式，而国内WiFi网络尚未全面覆盖，本研究选择应用更为普及的蓝牙技术，通过手机蓝牙与单片机进行数据交互，进而产生可调节占空比的PWM信号，以此来控制LED驱动电路，实现LED的调光功能以及DIY调色方案。 本文重点阐述了一种基于手机蓝牙通信的LED灯设计方案，该方案受到飞利浦Hue智能灯泡的启发，但考虑到国内WiFi网络的覆盖限制，故而选用更为通用的蓝牙技术。 以下为相关技术细节的详尽介绍：1. **智能照明控制系统**：智能照明控制系统允许用户借助手机应用程序实现远程控制照明设备，提供个性化的调光及色彩调整功能。 飞利浦Hue作为行业领先者，通过红、蓝、绿三原色LED的混合，能够呈现1600万种颜色，实现了全面的定制化体验。 2. **蓝牙通信技术**：蓝牙技术是一种低成本、短距离的无线传输方案，工作于2.4GHz ISM频段，具备即插即用和强抗干扰能力。 蓝牙协议栈由硬件层和软件层构成，提供通用访问Profile、服务发现应用Profile以及串口Profiles等丰富功能，确保不同设备间的良好互操作性。 3. **脉冲宽度调制调光**：脉冲宽度调制（PWM）是一种高效能的调光方式，通过调节脉冲宽度来控制LED的亮度。 当PWM频率超过200Hz时，人眼无法察觉明显的闪烁现象。 占空比指的...
（32页PPT）金秋九月十月主题中秋国庆露营DIY主题活动方案34.pptx
12-29
（32页PPT）金秋九月十月主题中秋国庆露营DIY主题活动方案34.pptx
webpack打包时候如何动态配置publicPath
09-11
<think> 我们正在讨论Webpack打包时动态配置publicPath的方法。根据引用[3]，我们可以通过设置`__webpack_public_path__`来实现动态修改publicPath。这种方法特别适用于需要在运行时确定资源路径的场景，比如微前端架构（乾坤）或者需要根据部署环境动态改变CDN地址的情况。 关键点： 1. `__webpack_public_path__`是Webpack的一个全局变量，用于设置运行时publicPath。 2. 动态设置的方法：在入口文件的最顶部（在任何import之前）赋值给`__webpack_public_path__`。 3. 通常我们将其设置为window对象上的一个属性，这样可以在运行时由外部注入（例如，通过HTML模板中的全局变量）。 具体步骤： 步骤1: 在入口文件（通常是index.js或main.js）的最顶部添加以下代码： ```javascript // 必须在所有import之前执行 __webpack_public_path__ = window.myDynamicPublicPath || './'; ``` 步骤2: 在HTML模板中，我们可以通过script标签设置window.myDynamicPublicPath。例如： ```html <script> window.myDynamicPublicPath = 'https://cdn.example.com/path/'; </script> ``` 这样，当Webpack打包的应用加载时，它会读取window.myDynamicPublicPath作为资源的基础路径。如果没有设置，则使用默认的'./'（当前路径）。 注意：由于这个赋值操作需要在所有模块导入之前执行，因此必须放在入口文件的最开始。 引用[3]中提到，如果你使用ESLint或TypeScript，可能会报错，因为`__webpack_public_path__`不是标准JavaScript变量。我们可以通过以下方式忽略： 1. 在TypeScript中，可以在全局声明中增加这个变量（在.d.ts文件中）： ```typescript declare let __webpack_public_path__: string; ``` 2. 在ESLint中，可以在该行上面添加注释忽略： ```javascript /* eslint-disable no-undef */ __webpack_public_path__ = window.myDynamicPublicPath || './'; /* eslint-enable no-undef */ ``` 另外，引用[2]解释了publicPath的作用：它影响的是浏览器如何加载这些文件。而path是Webpack输出文件在文件系统中的绝对路径。 这种方法的好处是： - 不需要在构建时指定publicPath（避免了多环境构建的麻烦）。 - 可以在运行时动态改变资源路径，特别适合部署到不同环境的场景。 但是，这种方法要求我们在HTML模板中能够注入全局变量。如果项目使用后端模板（如vm、freemarker等），则可以在渲染模板时动态设置window.myDynamicPublicPath。 示例场景： 假设我们的应用需要部署到不同的CDN，我们可以通过后端根据当前环境注入不同的CDN地址，前端无需重新构建。 总结：动态配置publicPath的方法就是利用`__webpack_public_path__`，并在入口文件顶部将其设置为从全局对象（如window）中获取的值，然后在HTML模板中通过脚本设置该全局对象的值。 注意事项： - 一定要在入口文件的最顶部设置，确保在所有模块加载之前就已经修改了publicPath。 - 如果项目使用了模块热替换（HMR），在开发环境下可能需要特殊处理，因为开发服务器通常有固定的publicPath（如'/'）。所以，在开发环境下可以跳过设置，或者设置一个默认值。 开发环境示例： ```javascript if (process.env.NODE_ENV === 'production') { __webpack_public_path__ = window.myDynamicPublicPath || './'; } else { // 开发环境使用默认的publicPath（由webpack dev server配置） } ``` 但注意，在开发环境下，我们可能并不需要动态设置，所以也可以不设置，直接使用webpack配置的publicPath。 最后，引用[1]和[5]提到，publicPath与资源加载路径有关，特别是对于CSS中引用的图片等资源，设置正确的publicPath非常重要。 因此，动态配置publicPath的方法为： 1. 在入口文件顶部设置`__webpack_public_path__`。 2. 通过全局变量（如window对象）在运行时注入具体的路径值。 这样，我们就实现了Webpack打包时动态配置publicPath的目标。 相关问题： 1. 如何为Webpack配置多个环境（开发、测试、生产）的publicPath？ 2. 在微前端架构中，主应用如何动态设置子应用的publicPath？ 3. 使用动态publicPath时，如何处理开发环境下的热更新？ </think> ### Webpack 打包时动态配置 publicPath 的方法 在 Webpack 打包中，动态配置 `publicPath` 的核心方法是**通过运行时赋值 `__webpack_public_path__` 全局变量**实现，而非构建时硬编码配置。具体操作如下： --- #### 1. **原理说明** - Webpack 默认的 `publicPath` 在构建时确定（如 `webpack.config.js` 中的 `output.publicPath`）。 - 动态配置原理： 通过 `__webpack_public_path__ = <动态值>` 覆盖默认值 → **必须在入口文件最顶部执行**（任何 `import` 之前） → 运行时生效，无需重新构建[^3]。 #### 2. **操作步骤** **(1) 创建动态赋值脚本** 在入口文件（如 `src/main.js`）最顶部添加： ```javascript // 必须在所有 import 之前！ if (typeof window !== 'undefined') { const dynamicPath = window.myCustomPath || '/fallback-path/'; __webpack_public_path__ = dynamicPath; // 动态覆盖 } ``` **(2) 注入运行时变量** 在 HTML 模板中注入路径值： ```html <script> window.myCustomPath = 'https://cdn.example.com/app/'; // 动态注入路径 </script> <script src="./dist/main.js"></script> ``` **(3) 构建配置调整** 在 `webpack.config.js` 中**移除硬编码**的 `publicPath`： ```javascript module.exports = { output: { // 不再配置 publicPath filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } } ``` --- #### 3. **关键注意事项** 1. **执行顺序** `__webpack_public_path__` 赋值必须位于入口文件**第一行**，否则对异步加载资源无效[^3]。 2. **数据类型验证** 动态值需是字符串类型，否则导致资源加载失败： ```javascript // 安全写法 __webpack_public_path__ = String(window.cdnPath || '/default/'); ``` 3. **环境兼容处理** 非浏览器环境（如 SSR）需跳过赋值： ```javascript if (typeof window !== 'undefined' && window.__INJECTED_PATH__) { __webpack_public_path__ = window.__INJECTED_PATH__; } ``` 4. **TypeScript 支持** 在 `.d.ts` 文件中声明全局变量： ```typescript declare let __webpack_public_path__: string; ``` --- #### 4. **适用场景** | **场景** | **实现方式** | **优点** | |--------------------------|----------------------------------------|-----------------------------| | 多环境 CDN 部署 | 通过部署脚本注入不同 CDN 地址 | 一次构建，多环境发布[^3] | | 微前端子应用 | 主应用运行时注入路径 (如乾坤框架) | 动态适配主应用路由[^1] | | 后端控制资源路径 | 服务器模板渲染时注入路径 (如 VM 模板) | 运维灵活调整 | --- #### 5. **验证方式** 检查运行时资源加载路径： ```javascript // 在代码中打印验证 console.log('动态 publicPath:', __webpack_public_path__); // 网络面板查看资源 URL // 应匹配 window.myCustomPath + 资源路径 ``` > **示例**：若 `window.myCustomPath = '/sub-app/'`，则 `image.png` 应加载为 `/sub-app/assets/image.png`[^2]。 --- ### 对比静态配置 vs 动态配置 | **特性** | 静态配置 (`output.publicPath`) | 动态配置 (`__webpack_public_path__`) | |------------------|--------------------------------------|--------------------------------------| | 生效时机 | 构建时确定 | 运行时覆盖 | | 是否需要重新构建 | 修改后需重新打包 | 无需重新构建 | | 灵活性 | 硬编码，环境适应性差 | 可运行时动态注入 | | 典型场景 | 单应用固定路径部署 | 微前端/CDN/多环境部署 | 通过运行时动态设置 `__webpack_public_path__`，可实现**一次构建，多环境动态适配**，特别适合需要灵活部署的场景[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值