init webpack-dev-server

yyccQQu · Jan 28, 2019 · b86c131 · b86c131
1 parent 5dd21c4
commit b86c131
Show file tree

Hide file tree

Showing 9 changed files with 1,105 additions and 33 deletions.
diff --git a/dist/bundle.js → build/bundle.js b/dist/bundle.js → build/bundle.js
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="./bundle.js"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/main.js b/dist/main.js
diff --git a/note.md b/note.md
@@ -13,4 +13,8 @@
 
 
 
+## 注意事项（keng）坑
+- webpack-dev-server 该命令 与配置文件中的 dev-server配置有关
+- 构建开发服务器的时候 起服务构建的时候需要html文件，否则不会显示页面，只会显示路径 
+
 
diff --git a/package.json b/package.json
@@ -1,6 +1,11 @@
 {
-  "devDependencies": {
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1"
-  }
+    "scripts": {
+        "build": "webpack --config webpack.config.js",
+        "dev": "webpack-dev-server"
+    },
+    "devDependencies": {
+        "webpack": "^4.29.0",
+        "webpack-cli": "^3.2.1",
+        "webpack-dev-server": "^3.1.14"
+    }
 }
diff --git a/src/bundle.js b/src/bundle.js
@@ -0,0 +1,106 @@
+(function (modules) {  // webpackBootstrap
+   //将模块儿转成key，内容转成value，根据依赖关系一次调用，便起到了打包的效果
+
+  // The module cache 先定义一个缓存
+  var installedModules = {};
+  // The require function 实现了一个 require
+    function __webpack_require__(moduleId) { //./src/index.js
+    // 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, { enumerable: true, get: getter });
+    }
+  };
+  // define __esModule on exports
+  __webpack_require__.r = function(exports) {
+    if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+      Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    }
+    Object.defineProperty(exports, "__esModule", { value: true });
+  };
+
+  // create a fake namespace object
+  // mode & 1: value is a module id, require it
+  // mode & 2: merge all properties of value into the ns
+  // mode & 4: return value when already ns object
+  // mode & 8|1: behave like require
+  __webpack_require__.t = function(value, mode) {
+    if (mode & 1) value = __webpack_require__(value);
+    if (mode & 8) return value;
+    if (mode & 4 && typeof value === "object" && value && value.__esModule)
+      return value;
+    var ns = Object.create(null);
+    __webpack_require__.r(ns);
+    Object.defineProperty(ns, "default", { enumerable: true, value: value });
+    if (mode & 2 && typeof value != "string")
+      for (var key in value)
+        __webpack_require__.d(
+          ns,
+          key,
+          function(key) {
+            return value[key];
+          }.bind(null, key)
+        );
+    return ns;
+  };
+  // 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 = "./src/index.js")); //入口模块
+})({
+  "./src/a.js":  // key -> 模块的路径
+  function(module, exports) { // value -> 函数
+    eval('console.log("a.js")\n\n//# sourceURL=webpack:///./src/a.js?');
+  },
+  "./src/index.js": function(module, exports, __webpack_require__) {
+    eval(
+      'console.log(1)\nlet str = __webpack_require__(/*! ./a.js */ "./src/a.js")\n\n//# sourceURL=webpack:///./src/index.js?'
+    );
+  }
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,11 +1,19 @@
 let path = require("path")
 
 module.exports = {
+    devServer: {
+        // 开发服务器配置 webpack-dev-server
+        // 起服务构建的时候需要html文件，否则不会显示页面，只会显示路径
+        port: 3000,
+        progress: true,
+        contentBase: './build'
+    },
+
     mode: "development",
     entry: "./src/index.js",
     output: {
         filename: "bundle.js", //打包后的文件名
-        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
+        path: path.resolve(__dirname, "./build") // 路径必须是一个绝对路径
     }
-}
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,4 +13,8 @@



		## 注意事项（keng）坑
		- webpack-dev-server 该命令与配置文件中的 dev-server配置有关
		- 构建开发服务器的时候起服务构建的时候需要html文件，否则不会显示页面，只会显示路径