webpack 打包报错 The 'mode' option has not been set, webpack will fallback to 'production' for,Module not found: Error: Can't resolve,WARNING in configuration

运行环境:

  • windows
  • nodejs v10.15.3
  • webpack v4.38.0

我先全局安装了 webpack 和 webpack-cli:

npm install -g webpack
npm install -g webpack-cli

然后运行 webpack 去打包时报错:

仔细看 webpack 官网手册发现,从4.0开始,运行 webpack 时一定要加参数 --mode development [开发环境] 或者 --mode production [生产环境] :

不使用配置文件的用法

webpack <entry> [<entry>] -o <output>

<entry>

一个文件名或一组被命名的文件名,作为构建项目的入口起点。你可以传递多个入口(每个入口在启动时加载)。如果传递一个形式为 <name> = <request> 的键值对,则可以创建一个额外的入口起点。它将被映射到配置选项(configuration option)的 entry 属性。

<output>

要保存的 bundled 文件的路径和文件名。它将映射到配置选项 output.path 和 output.filename

示例

webpack --mode development app.js -o bundle.js

如果有配置文件(webpack.config.js),加入 mode 即可。

module.exports = {
mode: 'development'
}

 
再次打包:
 
 

成功!

附:

配置选项

参数 说明 输入类型 默认值
--mode 用到的模式,"development" 或 "production" 之中的一个 string  

webpack打包 The 'mode' option has not been set, webpack will fallback to的更多相关文章

  1. webpack打包The 'mode' option has not been set,错误提示

    学习到webpack打包这个工具的时候,总是报错.在这里记录一下...... 我是window系统 当使用npm安装好webpack后,你去查看如果出现一下问题. 出现以上问题,我的做法是 先将web ...

  2. 笔记:webpack 打包参数 mode development

    webpack 打包参数 mode development 在开发时使用 webpack 打包后不压缩,所以只需要在 webpack 打包命令中加上 --mode mode development 即 ...

  3. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  4. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  5. vue结合webpack打包问题

    在使用vue开发项目时,如果要使用其单文件组件特性,必然要使用webpack或者其他打包工具打包,这里我用到的是webpack打包,首先是搭建vue环境和webpack环境,在这里遇到的一个问题是在成 ...

  6. webpack打包出现WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. 错误

    打包运行的时候出现以下错误 WARNING in configurationThe 'mode' option has not been set, webpack will fallback to ' ...

  7. vue-cli+webpack打包配置

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

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

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

  9. npm run dev--The 'mode' option has not been set, webpack will fallback to 'production' for this value

    npm run dev时报警告: warning configurationThe 'mode' option has not been set, webpack will fallback to ' ...

随机推荐

  1. Android 仿真器 无法启动排查

    从命令行启动仿真器,可以查看其输出. Microsoft Windows [版本 10.0.18362.145] (c) 2019 Microsoft Corporation.保留所有权利. C:\U ...

  2. (2018版)webstorm的安装和破解

    前言 相信使用HBuildX的各位都用过,所以这个webstorm就是用来代替的. 因为使用方式跟idea等软件差不多,如果习惯了idea的操作方式的可以试一试 安装webstorm 这是2018版的 ...

  3. 【产品】移动应用监控平台调研——bugly&fabric

    产品定位 腾讯bugly和fabric不仅仅是可以帮助运营人员分析用户.优化推广的数据分析平台,也是移动开发者的异常上报平台和应用更新平台.可以同时为公司产品运营和开发人员提供服务. 产品功能 fab ...

  4. 基于webpack实现多html页面开发框架七 引入第三方库如jquery

    一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...

  5. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  6. Creating a Physical Standby from Primary on Version 12c (Doc ID 1570958.1)

    Creating a Physical Standby from Primary on Version 12c (Doc ID 1570958.1) APPLIES TO: Oracle Databa ...

  7. nginx 校验及重启

    #查询nginx所在路径 [centos find 查询文件](https://www.cnblogs.com/codeWorldCodeHeart/p/12049262.html) #校验如下 /u ...

  8. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

  9. 小程序之--动态设置页面标题 wx.setNavigationBarTitle

    参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...

  10. Java之ArrayList类(集合)

    集合的由来 我们想存储多个数据,选择的容器可以是数组.而数组的长度是固定的,无法适应数据变化的需求.为了解决这个问题,Java提供了另一个容器 java.util.ArrayList 集合类,让我们可 ...