学习到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", // 开发环境

"build": "webpack --mode production" // 生产环境

最后在手动添加一个webpack.config.js文件(简化打包命令只需要输入webpack命令即可)

内容如下:其实就是配置了打包的源文件和需要打包到正式文件的路径

之前我路径写的有问题,没有使用path  这个问题是路径的问题,一定要注意

 注意:这里一定要加上:mode: 'development' // 设置mode

 

如在打包的时候还报以下错误:

工程目录下直接运行如下代码 :

  cnpm install webpack --save-dev

webpack打包The 'mode' option has not been set,错误提示的更多相关文章

  1. 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 ...

  2. webpack打包后访问不到json文件

    一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...

  3. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  4. webpack打包优化之外部扩展externals的实际应用

    目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...

  5. webpack打包多个入口文件

    打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进 ...

  6. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  7. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  8. 【原】使用webpack打包的后,公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  9. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

随机推荐

  1. nodejs模板加载的问题

    JADE模板:http://jumplink.github.io/jade2html2jade/ HTML转JADE,跟imooc上一步步来就搞定了 直接加载HTML静态资源: var express ...

  2. QM1_Time value of Money

    总体框架 Time Value  Interest Rate rf: 无风险收益率 (CFA中一般认为是美国短期国债T-bill的收益率) Nominal risk-free rate: 名义无风险税 ...

  3. DOM常见操作

    一.查找 1.直接查找 document.getElementById           根据ID获取一个标签 document.getElementsByName         根据name属性 ...

  4. SpringBoot JMS(ActiveMQ) 使用实践

    ActiveMQ 1. 下载windows办的activeMQ后,在以下目录可以启动: 2. 启动后会有以下提示 3. 所以我们可以通过http://localhost:8161访问管理页面,通过tc ...

  5. BZOJ_2679_[Usaco2012 Open]Balanced Cow Subsets _meet in middle+双指针

    BZOJ_2679_[Usaco2012 Open]Balanced Cow Subsets _meet in middle+双指针 Description Farmer John's owns N ...

  6. BZOJ_4269_再见Xor_线性基

    BZOJ_4269_再见Xor_线性基 Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行 ...

  7. python 库位置

    l\\Programs\\Python\\Python36\\lib   默认库安装路径 \\Programs\\Python\\Python36\\lib\\site-packages 第三方库安装 ...

  8. Python数据结构应用4——搜索(search)

    Search是数据结构中最基础的应用之一了,在python中,search有一个非常简单的方法如下: 15 in [3,5,4,1,76] False 不过这只是search的一种形式,下面列出多种形 ...

  9. 毕业样本=[胡弗汉顿大学毕业证书]UoW原件一模一样证书

    胡弗汉顿大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...

  10. 树莓派使用modbus与stm32通信

    树莓派+stm32开发板通信树莓派上使用java+jamod实现.jamod官网stm32使用freemodbus实现 ​