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 代码 ...
随机推荐
- 把一个机器上1天内新增的文件用rsync传送到另外一台机器
我的shell很菜,只好用shell和php结合来做 1.查找新增的文件,构造rsync的参数,把结果写入到log中 find /data/bmob/test/teststorage/data/ -m ...
- MyBatis-Spring中间件逻辑分析(怎么把Mapper接口注册到Spring中)
1. 文档介绍 1.1. 为什么要写这个文档 接触Spring和MyBatis也挺久的了,但是一直还停留在使用的层面上,导致很多时候光知道怎么用,而不知道其具体原理,这样就很难做一 ...
- VMware下对Ubuntu进行扩充磁盘大小
今天用虚拟机的时候,发现虚拟机快满了,提示磁盘空间小,不得不扩充虚拟机空间.经过百度搜索,终于搞定了,记录如下 平台:VMware(10.0.3)+Ubuntu 14.04(32bit) 1.选择VM ...
- 借助HTML中的特殊符号在markdown中打印出来
转自:https://blog.csdn.net/html5_/article/details/21639475 HTML中的特殊符号 原创 2014年03月20日 18:35:23 标签: HTML ...
- JFree图表
************************************************************************************* 使用JFree生成统计图片, ...
- java编程思想-第六章-某些练习题
参考https://blog.csdn.net/caroline_wendy/article/details/47271037 3 package debug; import java.util.Ar ...
- 基于ELK5.1(ElasticSearch, Logstash, Kibana)的一次整合测试
前言开源实时日志分析ELK平台(ElasticSearch, Logstash, Kibana组成),能很方便的帮我们收集日志,进行集中化的管理,并且能很方便的进行日志的统计和检索,下面基于ELK的最 ...
- go语言nsq源码解读六 tcp.go、tcp_server.go
本篇讲nsqlookupd中tcp.go.tcp_server.go tcp_server.go位于util目录下. 12345678910111213141516171819202122232425 ...
- [NOIP2016]愤怒的小鸟 D2 T3
Description Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的 ...
- 记一次logback传输日志到logstash根据自定义设置动态创建ElasticSearch索引
先说背景,由于本人工作需要创建很多小应用程序,而且在微服务的大环境下,服务越来越多,然后就导致日志四分五裂,到处都有,然后就有的elk,那么问题来了 不能每个小应用都配置一个 logstash 服务来 ...