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警告

猜你喜欢