zoukankan      html  css  js  c++  java
  • 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);
    
    document.getElementById('webpack').innerHTML = '123456789';
    
    //# sourceURL=webpack:///./a.js?");
    
    /***/ })
    
    /******/ });

      

  • 相关阅读:
    vue中表格自适应屏幕一屏显示
    css+jq实现星星评分
    CSS中width,min-width和max-width之间的联系
    用jq动态给导航菜单添加active
    解决ios中input兼容性问题
    swiper按钮点击无效及控制器无效问题
    bootstrap 模态框在iphone微信内点击无效
    vue,onerror实现当图片加载失败时使用默认图
    MVC模板页使用
    MVC框架+vue+elementUI
  • 原文地址:https://www.cnblogs.com/yyy6/p/8966949.html
Copyright © 2011-2022 走看看