webpack4.0报WARNING in configuration警告
在进行webpack打包工作时,先进行如下步骤
1). 安装webpack:推荐全局命令 cnpm install webpack -g 查看webpack版本 webpack -v
2) . 此时对文件进行打包可能出现错误,提示脚手架文件错误,因为在webpack4的版本里,CLI被单独分离出来了所以要我们单独安装 执行全局命令 npm i -g webpack-cli
原因:webpack4.0以后webpack和webpack-cli做了两个单独包
具体细节可以查看webpack中文文档或者HelloGirl-webpack。
以上工作做完时,单独打包时一直报警告,如图:
文件结构很简单
webpack
--a.js
--b.js
--package.json
警告如图:

备注:以上的警告指的是没有设定是开发模式还是生产模式,出现这个错误提示并不是我们环境装错了,而是webpack4 更新后对webpack语法进行了更严格的要求
如果是要单独打包可以常用如下命令:
npx webpack a.js --output-filename b.js --output-path . --mode development
备注: a.js 是我们本地开发的js代码,b.js是打包之后的代码(如果没有文件b.js,则重新生成b.js文件)
我的a.js文件如下
console.log(11);
document.getElementById('webpack').innerHTML = '123456789';
打包后的b.js文件如下
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./a.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./a.js":
/*!**************!*\
!*** ./a.js ***!
\**************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("console.log(11);\n\ndocument.getElementById('webpack').innerHTML = '123456789';\n\n//# sourceURL=webpack:///./a.js?");
/***/ })
/******/ });
webpack4.0报WARNING in configuration警告的更多相关文章
- 解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告
出现这种错误的情况: 用iphone5模拟器编译程序正常, 用iphone5s以上的模拟器编译出现Undefined symbols for architecture x86_64: 报错 和 ld: ...
- webpack4.0 实战记录
从零配置webpack4.0 搭建React工程. 基本环境:Node(v8.1.2)+ webpack(v4.16.2) 1.在项目目录 命令窗口 执行 npm init 初始化项目,执行完后项 ...
- Android Studio 生成Release版,报Warning的解决办法
转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6242227.html 请尊重知识产权!!! 同步更新到CSDN:http://blog.csdn.net/ ...
- webpack4.0各个击破(1)—— html部分
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0在Mac下的安装配置及踩到的坑
一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以 ...
- webpack4.0介绍与使用(一)
1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为 ...
- webpack4.0打包优化策略整理小结
本文转载于:https://www.jb51.net/article/137449.htm 介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资 ...
- (一)WebPack4.0 从零开始
一:WebPack基础知识 (1):webpack的定义 webpack官网给出的定义是:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). ...
- Webpack4.0各个击破(1)html篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
随机推荐
- 腾讯云VPS注意事项
这几天腾讯云VPS搞活动 买了2台服务器, 1台是1核2G1M带宽,一年99 1台是2核4G6M带宽,三年1499 前几年一直在用阿里云,感觉价格太贵,价格上腾讯云,搞活动真的优惠比较大, 最近也准备 ...
- 每日一问:讲讲 JVM 的类加载机制
前面给大家讲解了 Java 虚拟的内存结构 以及 Java 虚拟机的垃圾回收机制,我们更加明白了 Java 的内存管理机制,今天我们来讲讲 Java 虚拟机的另外一个高频考点:类加载机制. JVM 的 ...
- losetup命令使用
1.losetup命令 Linux系统losetup命令用来设置循坏设备,循坏设备可以把文件虚拟成块设备,借此来模拟整个文件系统,让用户得以将其视为硬盘驱动器,光驱等设备,并挂入当作目录来使用. (1 ...
- windowsServer-------- 系统中调出文件扩展名
Windows Server是微软发布的一系列服务器操作系统的品牌名. 各个品牌的发布日期 Windows Server 2003 (2003年4月) Windows Server 2003 R2(2 ...
- elasticsearch迁移数据到新索引中
因为业务原因,需要修改索引的映射的某个字段的类型,比如更改Text为Keyword. 需要如下步骤: 1).先新建索引,映射最新的映射实体 2).迁移老索引的数据到新索引中(数据较大的话,可以分批迁移 ...
- python面试题_01
前言 现在面试测试岗位,一般会要求熟悉一门语言(python/java),为了考验求职者的基本功,一般会出2个笔试题,这些题目一般不难,主要考察基本功.要是给你一台电脑,在编辑器里面边写边调试,没多大 ...
- contenteditable联合v-html实现数据双向绑定的vue组件
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图: (1)上面看似文本域的大框是通过给div ...
- 【题解】Kathy函数 [BZOJ1223] [P2235] [HNOI2002]
[题解]Kathy函数 [BZOJ1223] [P2235] [HNOI2002] 这几疯狂刷了数位\(dp\)的题,到这道题时被卡了一天,一看大佬的讲解发现居然是求回文数╮(╯_╰)╭ 感觉被大佬狠 ...
- FusionInsight大数据开发---Oozie应用开发
Oozie应用开发 要求: 了解Oozie应用开发适用场景 掌握Oozie应用开发 熟悉并使用Oozie常用API Oozie简介 Oozie是一个Hadoop作业的工作流调度管理系统 Oozie工作 ...
- Maven distributionManagement 分发构件至远程仓库
https://blog.csdn.net/qq827245563/article/details/82661583 maven发布到本地仓库,和私服https://blog.csdn.net/u01 ...