初识webpack

webpack的功能

主要功能：将复杂的代码，框架和其它扩展工具的文件转化成浏览器可以直接识别的HTML，CSS和JavaScript。

比如 SASS打包为CSS，多个互相依赖的JS转化为单个JS

 

Webpack的基本概念：

树结构

不同js文件之间互相引用，他们之间的关系会形成一个树状的结构。Webpack用一个树的数据结构去包含它们，把它们作为一个个节点。这棵树的root就是webpack打包的入口（entry）。

模块

可导入的独立文件，比如图片，js，css，sass文件等

chunk

模块的集合称作chunk。根据文件层级或者用处的不同，可以打包成不同的chunk。

bundel

打包好的最终文件称为bundel。它看起来像chunk，但是大部分情况下是多个chunk的集合。打包的过程涉及 翻译，优化，压缩。

 

webpack配置的基本核心概念

entry 入口

只是webpack以哪个文件开始去打包项目，分析并构建内部依赖图

output 输出

打包后的资源输出的路径以及命名

Loader 翻译器

Loader让webpack能去处理那些非javascript资源，可以理解为翻译器

Plugins 插件

增加webpack的功能，包括优化和打包压缩，重新定义环境变量等

Mode 模式

模式	描述	特点
development	代码可以再本地运行调试	本地环境，配置简单
production	代码的兼容性会更好，但是会更复杂	使用插件更多，压缩更多

 

根目录新建 webpack.config.js文件。这个是默认文件名，如果取其他名字，则需要在载入配置时指定。

以下是核心配置。

const {resolve} = require('path'); // node插件，获取目录信息的
module.exports = {
    entry: "./src/index.js", // 设置webpack的入口entry
    mode: "development", // 设置完直接执行命令 webpack 会自动选用dev模式
    output: {
        // 设定目录
        filename: "bundel.js",
        path: resolve(__dirname,"build"),
    },    
    module: {
        rules: [
            // css img 等文件处理的规则
        ]
    },
    plugins:[
        // webpack的loader做不了的任务，可以配合plugin去完成
    ]
}

 

 

 

*index.js: 入口文件*

*本地添加webpack依赖： npm i webpack webpack-cli -d*

*开发模式进行打包，输出到 build： webpack --entry ./src/index.js -o ./build/built.js --mode=development*

*webpack5+: webpack -o ./buid/built.js --mode development*

配置好后：直接 webpack

 

打包后返回的信息

runtime modules 668 bytes 3 modules

cacheable modules 919 bytes

./src/index.js 655 bytes [built] [code generated]

./src/middle.js 115 bytes [built] [code generated]

./src/demo.js 149 bytes [built] [code generated]

webpack 5.17.0 compiled successfully in 107 ms

 

打包前

/* demo.js */
const x = 100;
​
function add(x, y) {
  return x + y;
}
​
function demo(string) {
  return string;
}
​
module.exports = {
  x,
  add,
  demo,
};
​
/* middle.js */
const {x, add, demo} = require('./demo'); 
let b = add(x,20);
let d = demo('sure');
​
module.exports = {
    b,
    d
};
​
/* index.js */
const {b,d} = require('./middle');
console.log(b);
console.log(d);

dev 打包后

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({
​
/***/ "./src/demo.js":
/*!*********************!*\
  !*** ./src/demo.js ***!
  \*********************/
/***/ ((module) => {
​
eval("\r\nconst x = 100;\r\n\r\nfunction add(x, y) {\r\n  return x + y;\r\n}\r\n\r\nfunction demo(string) {\r\n  return string;\r\n}\r\n\r\nmodule.exports = {\r\n  x,\r\n  add,\r\n  demo,\r\n};\r\n\n\n//# sourceURL=webpack://demo/./src/demo.js?");
​
/***/ }),
​
/***/ "./src/middle.js":
/*!***********************!*\
  !*** ./src/middle.js ***!
  \***********************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
​
eval("const {x, add, demo} = __webpack_require__(/*! ./demo */ \"./src/demo.js\"); \r\nlet b = add(x,20);\r\nlet d = demo('sure');\r\n\r\nmodule.exports = {\r\n    b,\r\n    d\r\n};\n\n//# sourceURL=webpack://demo/./src/middle.js?");
​
/***/ })
​
/******/    });
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(__webpack_module_cache__[moduleId]) {
/******/            return __webpack_module_cache__[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = __webpack_module_cache__[moduleId] = {
/******/            // no module.id needed
/******/            // no module.loaded needed
/******/            exports: {}
/******/        };
/******/    
/******/        // Execute the module function
/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/    
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/    
/************************************************************************/
(() => {
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
eval("/*\r\nindex.js: 入口文件\r\n本地添加webpack依赖： npm i webpack webpack-cli -d\r\n开发环境： webpack --entry ./src/index.js -o ./build/built.js --mode=development\r\nwebpack5+: webpack -o ./buid/built.js --mode development\r\n\r\n打包后返回的信息\r\nruntime modules 668 bytes 3 modules\r\ncacheable modules 919 bytes\r\n  ./src/index.js 655 bytes [built] [code generated]\r\n  ./src/middle.js 115 bytes [built] [code generated]\r\n  ./src/demo.js 149 bytes [built] [code generated]\r\nwebpack 5.17.0 compiled successfully in 107 ms\r\n\r\n*/\r\n\r\nconst {b,d} = __webpack_require__(/*! ./middle */ \"./src/middle.js\"); \r\nconsole.log(b);\r\nconsole.log(d);\n\n//# sourceURL=webpack://demo/./src/index.js?");
})();
​
/******/ })()
;xxxxxxxxxx /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). *//******/ (() => { // webpackBootstrap/******/    "use strict";/******/    var __webpack_modules__ = ({/***/ "./src/demo.js":/*!*********************!*\  !*** ./src/demo.js ***!  \*********************//***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"x\": () => /* binding */ x,\n/* harmony export */   \"add\": () => /* binding */ add,\n/* harmony export */   \"demo\": () => /* binding */ demo\n/* harmony export */ });\n\r\nconst x = 100;\r\n\r\nfunction add(x, y) {\r\n  return x + y;\r\n}\r\n\r\nfunction demo(string) {\r\n  return string;\r\n}\r\n\r\n\r\n\n\n//# sourceURL=webpack://demo/./src/demo.js?");/***/ }),/***/ "./src/index.js":/*!**********************!*\  !*** ./src/index.js ***!  \**********************//***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _middle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./middle.js */ \"./src/middle.js\");\n/*\r\nindex.js: 入口文件\r\n本地添加webpack依赖： npm i webpack webpack-cli -d\r\n开发环境： webpack --entry ./src/index.js -o ./build/built.js --mode=development\r\nwebpack5+: webpack -o ./buid/built.js --mode development\r\n\r\n打包后返回的信息\r\nruntime modules 668 bytes 3 modules\r\ncacheable modules 919 bytes\r\n  ./src/index.js 655 bytes [built] [code generated]\r\n  ./src/middle.js 115 bytes [built] [code generated]\r\n  ./src/demo.js 149 bytes [built] [code generated]\r\nwebpack 5.17.0 compiled successfully in 107 ms\r\n\r\n*/\r\n\r\n\r\n\r\nconsole.log(_middle_js__WEBPACK_IMPORTED_MODULE_0__.b);\r\nconsole.log(_middle_js__WEBPACK_IMPORTED_MODULE_0__.d);\n\n//# sourceURL=webpack://demo/./src/index.js?");/***/ }),/***/ "./src/middle.js":/*!***********************!*\  !*** ./src/middle.js ***!  \***********************//***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"b\": () => /* binding */ b,\n/* harmony export */   \"d\": () => /* binding */ d\n/* harmony export */ });\n/* harmony import */ var _demo_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./demo.js */ \"./src/demo.js\");\n\r\n\r\nlet b = (0,_demo_js__WEBPACK_IMPORTED_MODULE_0__.add)(_demo_js__WEBPACK_IMPORTED_MODULE_0__.x,20);\r\nlet d = (0,_demo_js__WEBPACK_IMPORTED_MODULE_0__.demo)('sure');\r\n\r\n\n\n//# sourceURL=webpack://demo/./src/middle.js?");/***/ })/******/    });/************************************************************************//******/    // The module cache/******/    var __webpack_module_cache__ = {};/******/    /******/    // The require function/******/    function __webpack_require__(moduleId) {/******/        // Check if module is in cache/******/        if(__webpack_module_cache__[moduleId]) {/******/            return __webpack_module_cache__[moduleId].exports;/******/        }/******/        // Create a new module (and put it into the cache)/******/        var module = __webpack_module_cache__[moduleId] = {/******/            // no module.id needed/******/            // no module.loaded needed/******/            exports: {}/******/        };/******/    /******/        // Execute the module function/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);/******/    /******/        // Return the exports of the module/******/        return module.exports;/******/    }/******/    /************************************************************************//******/    /* webpack/runtime/define property getters *//******/    (() => {/******/        // define getter functions for harmony exports/******/        __webpack_require__.d = (exports, definition) => {/******/            for(var key in definition) {/******/                if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {/******/                    Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });/******/                }/******/            }/******/        };/******/    })();/******/    /******/    /* webpack/runtime/hasOwnProperty shorthand *//******/    (() => {/******/        __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)/******/    })();/******/    /******/    /* webpack/runtime/make namespace object *//******/    (() => {/******/        // define __esModule on exports/******/        __webpack_require__.r = (exports) => {/******/            if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });/******/            }/******/            Object.defineProperty(exports, '__esModule', { value: true });/******/        };/******/    })();/******/    /*******************************************/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). *//******/ (() => { // webpackBootstrap/******/    var __webpack_modules__ = ({/***/ "./src/demo.js":/*!*********************!*\  !*** ./src/demo.js ***!  \*********************//***/ ((module) => {eval("\r\nconst x = 100;\r\n\r\nfunction add(x, y) {\r\n  return x + y;\r\n}\r\n\r\nfunction demo(string) {\r\n  return string;\r\n}\r\n\r\nmodule.exports = {\r\n  x,\r\n  add,\r\n  demo,\r\n};\r\n\n\n//# sourceURL=webpack://demo/./src/demo.js?");/***/ }),/***/ "./src/middle.js":/*!***********************!*\  !*** ./src/middle.js ***!  \***********************//***/ ((module, __unused_webpack_exports, __webpack_require__) => {eval("const {x, add, demo} = __webpack_require__(/*! ./demo */ \"./src/demo.js\"); \r\nlet b = add(x,20);\r\nlet d = demo('sure');\r\n\r\nmodule.exports = {\r\n    b,\r\n    d\r\n};\n\n//# sourceURL=webpack://demo/./src/middle.js?");/***/ })/******/    });/************************************************************************//******/    // The module cache/******/    var __webpack_module_cache__ = {};/******/    /******/    // The require function/******/    function __webpack_require__(moduleId) {/******/        // Check if module is in cache/******/        if(__webpack_module_cache__[moduleId]) {/******/            return __webpack_module_cache__[moduleId].exports;/******/        }/******/        // Create a new module (and put it into the cache)/******/        var module = __webpack_module_cache__[moduleId] = {/******/            // no module.id needed/******/            // no module.loaded needed/******/            exports: {}/******/        };/******/    /******/        // Execute the module function/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);/******/    /******/        // Return the exports of the module/******/        return module.exports;/******/    }/******/    /************************************************************************/(() => {/*!**********************!*\  !*** ./src/index.js ***!  \**********************/eval("/*\r\nindex.js: 入口文件\r\n本地添加webpack依赖： npm i webpack webpack-cli -d\r\n开发环境： webpack --entry ./src/index.js -o ./build/built.js --mode=development\r\nwebpack5+: webpack -o ./buid/built.js --mode development\r\n\r\n打包后返回的信息\r\nruntime modules 668 bytes 3 modules\r\ncacheable modules 919 bytes\r\n  ./src/index.js 655 bytes [built] [code generated]\r\n  ./src/middle.js 115 bytes [built] [code generated]\r\n  ./src/demo.js 149 bytes [built] [code generated]\r\nwebpack 5.17.0 compiled successfully in 107 ms\r\n\r\n*/\r\n\r\nconst {b,d} = __webpack_require__(/*! ./middle */ \"./src/middle.js\"); \r\nconsole.log(b);\r\nconsole.log(d);\n\n//# sourceURL=webpack://demo/./src/index.js?");})();/******/ })();*****************************//******/    // startup/******/    // Load entry module/******/    __webpack_require__("./src/index.js");/******/    // This entry module used 'exports' so it can't be inlined/******/ })();

prodcution打包后

(()=>{"use strict";console.log(120),console.log("sure")})();