在进行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警告的更多相关文章

  1. 解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告

    出现这种错误的情况: 用iphone5模拟器编译程序正常, 用iphone5s以上的模拟器编译出现Undefined symbols for architecture x86_64: 报错 和 ld: ...

  2. webpack4.0 实战记录

    从零配置webpack4.0 搭建React工程. 基本环境:Node(v8.1.2)+ webpack(v4.16.2) 1.在项目目录 命令窗口  执行  npm init 初始化项目,执行完后项 ...

  3. Android Studio 生成Release版,报Warning的解决办法

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6242227.html 请尊重知识产权!!! 同步更新到CSDN:http://blog.csdn.net/ ...

  4. webpack4.0各个击破(1)—— html部分

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  5. webpack4.0在Mac下的安装配置及踩到的坑

    一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以 ...

  6. webpack4.0介绍与使用(一)

    1:webpack的基本使用: ##在网页中会引用那些静态资源: js, css, images, 字体文件和模板文件(.vue)等 ##网页总引用静态资源多了以后会有那些问题: 网页加载速度慢,因为 ...

  7. webpack4.0打包优化策略整理小结

    本文转载于:https://www.jb51.net/article/137449.htm 介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资 ...

  8. (一)WebPack4.0 从零开始

    一:WebPack基础知识 (1):webpack的定义 webpack官网给出的定义是:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). ...

  9. Webpack4.0各个击破(1)html篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

随机推荐

  1. Leetcode 5274. 停在原地的方案数

    纪念第一次正式参加,听说这次题目很水,感觉确实不是很难,一般前两题都很简单,这次,到第三题的时候,都还可以做,emm...... 实际代码记录: #include <iostream> # ...

  2. 【Kubernetes学习之一】Kubernetes 简介

    环境 centos 7 一.概念和组件Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署.大规模可伸缩.应用容器化管理,简称k8s. 1.Master Kubernetes中的 ...

  3. [C++基础] 数组、指针、内存篇

    一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...

  4. NOI-动规题目集锦

    162:Post Office 解题思路 #include<bits/stdc++.h> using namespace std; ],f[][],mi[][],i,j; int main ...

  5. vue父子(父传子)传值

    vue2.0中,实现父子组件间的传值,需要依靠一个props的属性,作为变量接收的对象. 注:vue.js文件引用的是本地的js文件,拷贝本机运行时,可以使用cnd替换. https://www.bo ...

  6. dp + 预处理前缀和 - HNU 13248 Equator

    Equator Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13248&cour ...

  7. Scala Class etc. 2

    Higher-Order Functions def 定义的是方法,而不是函数 函数可作为变量存在,可直接调用,也可作为值传递给其他函数 _ 后缀将普通方法变为函数: ceil _ 根据上下文编译器可 ...

  8. python解决使用镜像源来安装包

    一.问题在进行python包安装的时候出现一个问题就是无法进行安装,且出现了如下的错误 报错代码 Retrying (Retry(total=4, connect=None, read=None, r ...

  9. Java学习:final关键字的使用与注意事项

    final 关键字代表最终.不可改变的. 常见的四种用法 可以用来修饰一个类 可以用来修饰一个方法 可以用来修饰一个局部变量 可以用来修饰一个成员变量 1.当final关键字用来修饰一个类的时候,格式 ...

  10. IP地址和MAC地址绑定的必要性

    计算机网络是一个共通的网络,世界上任何计算机都可以互相访问. 实现的原理基于网络通讯的互联网交互五层模型. 计算机网络的历史发展 当计算机网络技术初始利用的时代,几台计算机通过集线器连接,就可以实现网 ...