webpack打包The 'mode' option has not been set,错误提示
学习到webpack打包这个工具的时候,总是报错。在这里记录一下......
我是window系统
当使用npm安装好webpack后,你去查看如果出现一下问题。
出现以上问题,我的做法是 先将webpack全局卸载,安装cnpm 然后使用cnpm安装webpack
我以为完事大吉,都解决了..........
在进行打包的时候报如下错误:
Built at: -- ::
asset
Entrypoint main = main.js
[] multi ./src/index.js ./dist/bundle.js bytes {} [built]
[] ./src/index.js bytes {} [built]
+ hidden module WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ERROR in multi ./src/index.js ./dist/bundle.js
Module not found: Error: Can't resolve '.\dist\bundle.js' in 'D:\自己项目\Python\code\webpack'
@ multi ./src/index.js ./dist/bundle.js main[]
结合查询的资料得出:
1:第一次执行打包需要执行一下:npm init -y
这时候项目中会出现一个package.json配置文件
在这个文件中找到“scripts”节点加入:
"dev": "webpack --mode development", // 开发环境

最后在手动添加一个webpack.config.js文件(简化打包命令只需要输入webpack命令即可)
内容如下:其实就是配置了打包的源文件和需要打包到正式文件的路径
之前我路径写的有问题,没有使用path 这个问题是路径的问题,一定要注意
注意:这里一定要加上:mode: 'development' // 设置mode
如在打包的时候还报以下错误:
工程目录下直接运行如下代码 :
cnpm install webpack --save-dev
webpack打包The 'mode' option has not been set,错误提示的更多相关文章
- webpack打包 The 'mode' option has not been set, webpack will fallback to
webpack 打包报错 The 'mode' option has not been set, webpack will fallback to 'production' for,Module no ...
- webpack打包后访问不到json文件
一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- webpack打包多个入口文件
打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进 ...
- webpack打包器简单入门
概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...
- 使用webpack打包ThinkPHP的资源文件
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...
- 【原】使用webpack打包的后,公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
随机推荐
- java equals和tostring
Object类概述 是所有类中的父类,最大的超类,所有的类都继承他. equals方法 比较2个对象是否相同,其实他是在比较两个对象的地址是否相同,在equals方法中我们用==来判断 但是比较2个地 ...
- 【SAP S/4 1511之变】:主数据之变
本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...
- Python实现微信消息防撤回
微信(WeChat)是腾讯公司于2011年1月21日推出的一款社交软件,8年时间微信做到日活10亿,日消息量450亿.在此期间微信也推出了不少的功能如:“摇一摇”.“漂流瓶”.“朋友圈”.“附近的人” ...
- Spark学习之编程进阶总结(一)
一.简介 这次介绍前面没有提及的 Spark 编程的各种进阶特性,会介绍两种类型的共享变量:累加器(accumulator)与广播变量(broadcast variable).累加器用来对信息进行聚合 ...
- ES 10 - Elasticsearch的索引别名和索引模板
目录 1 索引模板概述 1.1 什么是索引模板 1.2 索引模板中的内容 1.3 索引模板的用途 2 创建索引模板 3 查看索引模板 4 删除索引模板 5 模板的使用建议 5.1 一个index中不能 ...
- redis的bigkey扫描脚本
众所周知,redis里面的大key存在是非常危险的一件事情.因为最近的工作转移到中间件相关的工作,因此关注了一下bigkey的扫描方法.首先介绍一下阿里云提供的扫描脚本: 具体可见:https://y ...
- Springcloud Gateway 路由管理
Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开 ...
- Vue2.0源码阅读笔记(三):计算属性
计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能. 一.计算属性初始化 Vue 在做数据初始化时,通过 in ...
- Caffe源码理解3:Layer基类与template method设计模式
目录 写在前面 template method设计模式 Layer 基类 Layer成员变量 构造与析构 SetUp成员函数 前向传播与反向传播 其他成员函数 参考 博客:blog.shinelee. ...
- Asp.NETCore轻松学系列阅读指引目录
前言 耗时两个多月,坚持写这个入门系列文章,就是想给后来者更好更快的上手体验,这个系列可以说是从入门到进阶,适合没有 .NETCore 编程经验到小白同学,也适合从 .NET Framework 迁移 ...