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 代码 ...
随机推荐
- PyCharm 专题
pycharm常用设置 pycharm中的设置是可以导入和导出的,file>export settings可以保存当前pycharm中的设置为jar文件,重装时可以直接import settin ...
- TCP入门与实例讲解
内容简介 TCP是TCP/IP协议栈的核心组成之一,对开发者来说,学习.掌握TCP非常重要. 本文主要内容包括:什么是TCP,为什么要学习TCP,TCP协议格式,通过实例讲解TCP的生命周期(建立连接 ...
- nodejs-2.httpfuwu
一.使用nodejs的http服务:处理 "请求或响应" 数据 要使用 HTTP 服务器与客户端,需要 require('http'). Node.js 中的 HTTP 接口被设计 ...
- nodejs模块xml2js解析xml的坑
在一个项目中,用到nodejs模块xml2js解析xml,xml的数据如下: <xml> <MsgId>6197906553041859764</MsgId> &l ...
- Git常用命令解说
http://blog.csdn.net/hangyuanbiyesheng/article/details/6731629 1. Git概念 1.1. Git库中由三部分组成 Gi ...
- Android 实战美女拼图游戏 你能坚持到第几关
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40595385,本文出自:[张鸿洋的博客] 1.概述 继2048之后,今天给大家带 ...
- error LNK2001: 无法解析的外部符号 解决方法
错误提示:LNK2001 无法解析的外部符号 "public: class el::base::Writer & __cdecl el::base::Writer::construc ...
- Elasticsearch笔记六之中文分词器及自定义分词器
中文分词器 在lunix下执行下列命令,可以看到本来应该按照中文"北京大学"来查询结果es将其分拆为"北","京","大" ...
- 网络流解线性规划问题 BZOJ1061: [Noi2008]志愿者招募
线性规划定义: 在给定有限的资源和竞争约束情况下,很多问题都可以表述为最大化或最小化某个目标.如果可以把目标指定为某些变量的线性函数,而且如果可以将资源约束指定为这些变量的等式或不等式,则得到了一个线 ...
- BZOJ_5015_[Snoi2017]礼物_矩阵乘法
BZOJ_5015_[Snoi2017]礼物_矩阵乘法 Description 热情好客的请森林中的朋友们吃饭,他的朋友被编号为 1-N,每个到来的朋友都会带给他一些礼物:.其中,第 一个朋友会带给他 ...