weixin_34119545
weixin_34119545

webpack bootstrap源码解读

虽然一直在用webpack，但很少去看它编译出来的js代码，大概是因为调试的时候有sourcemap，可以直接调试源码。一时心血来潮想研究一下，看了一些关于webpack编译方面的文章都有提到，再结合自己看源码的体会，记录一下自己的理解

说bootstap可能还有点不好理解，看一下webpack编译出来的js文件就很好理解了：

// 编译前的入口文件index.js的内容
let a = 1;
console.log(a);

// webpack编译后的文件内容
webpackJsonp([0],[
/* 0 */
/***/ (function(module, exports) {


let a = 1;
console.log(a);

/***/ })
],[0]);
复制代码

编译后的文件跟我们的源文件不太一样了，原本的内容被放到了一个function(module, exports){}函数里，而最外层多了一个webpackJsonp的执行代码。那么问题来了：

  1. webpackJsonp是在哪里定义的，它是干什么用的？
  2. 包裹原来代码的function(module, exports){}又是干什么用的？

这就是bootstrap的作用了。如果不用code split把bootstrap单独分离出来，它就在编译出的js文件最上面，因为需要先执行bootstrap后续的代码才能执行。我们可以用CommonChunkPlugin把它单独提出来，方便我们阅读。把下面的代码写到你的webpack的plugin配置里即可：

new webpack.optimize.CommonsChunkPlugin({
    name: "manifest" // 可以叫manifest，也可以用runtime
}),
复制代码

配置之后，编译出来的文件会多出一个manifest.js文件，这就是webpack bootstrap的代码了。bootstrap和用户代码（就是我们自己写的部分）编译后的文件其实是一个整体，所以后面的分析会引入用户代码一起看

manifest.js

manifest源码分为3个部分：

  1. 创建了一个闭包，初始化需要用到的变量
  2. 定义webpackJsonp方法，挂载到window变量下
  3. 定义与编译相关的辅助函数和变量，如__webpack_require__(也就是我们在自己的代码里用到的require语法)

我们一个一个来看。下面的每个部分，我们都只截取manifest源码的相关部分来看，完整的源码放在文章最后了

初始化部分

/******/ (function(modules) { // webpackBootstrap
            // ......

            // The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// objects to store loaded and loading chunks
/******/ 	var installedChunks = {
/******/ 		1: 0
/******/ 	};

            // ......
/******/ })
/************************************************************************/
/******/ ([]);
复制代码

我们截取了manifest最外层的代码和初始化部分的代码，可以看到整个文件都被一个闭包括在里面，而modules的初始值是一个空的Array([])。 这样做可以隔离作用域，保护内部的变量不被污染

  • modules 空的Array([])，用来存放每个module的内容
  • installedModules存放module的cache，一个module被执行后（module的执行会在webpackJsonp的源码部分提到）的结果被保存到这里，之后再用到这个模块就可以直接使用缓存而无需再次执行了
  • installedChunks 用来存放chunk的执行情况。若一个chunk已经加载了，在installedChunks里这个chunk的值会变成0，也就是无需再加载了

如果分不清module和chunk这两个概念的区别，文章最后一节专门对此作了解释

webpackJsonp

源码分析

在讲webpackJsonp的源码之前，先回忆一下我们自己的chunk代码

// 编译前的入口文件index.js的内容
let a = 1;
console.log(a);

// webpack编译后的文件内容
webpackJsonp([0],[
/* 0 */
/***/ (function(module, exports) {


let a = 1;
console.log(a);

/***/ })
],[0]);
复制代码

执行webpackJsonp，传了3个参数:

  • chunkIds chunk的id，这里用了array，但一般一个文件就是一个chunk

  • moreModules chunk里所有模块的内容。模块内容可能不是很直观，再看上面编译后的代码，我们的代码被包在function(module, exports) {}里，其实是变成了一个函数，这就是一个模块内容。这其实是CommonJs规范中一个模块的定义，只是我们在写模块的时候不用自己写这个头尾，工具会帮我们生成。还记得AMD规范吗？

    moreModules还隐藏了对每个module的id的定义。从编译后的文件里可以看到/* 0 */这样的注释，结合代码来看，其实module的id就是它在moreModules里的数组下标。那么问题来了，只有一个entry chunk还好说，如果有多个chunk，每个chunk里的moreModules的Id不会冲突吗？这里有个小技巧，如下是一个异步chunk的部分代码：

    webpackJsonp([0],[
/* 0 */,
/* 1 */,
/* 2 */,
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

// ......
复制代码

    看到了吗，moreModules的前3个元素是空的，也就是说0-2这三个id已经被别的chunk使用了

  • executeModules 需要执行的module，也是一个array。并不是每一个chunk都有executeModules，事实上只有entry chunk才有，因为entry.js是需要执行的

ok，有了使用webpackJsonp部分的印象，再来看webpackJsonp代码会清晰很多

/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ 		// add "moreModules" to the modules object,
/******/ 		// then flag all "chunkIds" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
                // 
/******/ 		for(;i < chunkIds.length; i++) {       // part 1
/******/ 			chunkId = chunkIds[i];
/******/ 			if(installedChunks[chunkId]) {
/******/ 				resolves.push(installedChunks[chunkId][0]);
/******/ 			}
/******/ 			installedChunks[chunkId] = 0;
/******/ 		}
                // 取出每个module的内容
/******/ 		for(moduleId in moreModules) {         // part 2
/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				modules[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
                // 
/******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/ 		while(resolves.length) {                // part 3
/******/ 			resolves.shift()();
/******/ 		}
                // 执行executeModules
/******/ 		if(executeModules) {                    // part 4
/******/ 			for(i=0; i < executeModules.length; i++) {
/******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
/******/ 			}
/******/ 		}
/******/ 		return result;
/******/ 	};
复制代码

首先，webpackJsonp是挂在window全局变量上的，看看每个chunk的开头就知道为什么。我把它分为4块：

  • part 1 这部分涉及到installedChunks，我们之前了解过，如果没有异步加载的chunk，这部分是用不到的，我们留到异步chunk再说

  • part 2 取出这个chunk里所有module的内容，放到modules里，这里并不执行每个module，而是真正用到这个module时再从modules里取出来执行

  • part 3 与part 1一样是对installedChunks的操作，放到后面再说

  • part 4 执行executeModules，一般只有入口文件对应的module是需要执行的。执行module调用了__webpack_require__方法。

    还记得我们在代码里怎么引入别的js吗？ 对，require方法。其实我们的代码编译后会被转成__webpack_require__，只不过要把引用的路径换成moduleId，这一步也是webpack处理的。所以__webpack_require__的作用就是执行一个module，把它的exports返回。先来看看它的实现：

                // The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {   // line 1
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {  // line 2
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // line 3
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;  // line 4
/******/ 	}
复制代码

    line 1检查这个module是不是已经执行过，是的话一定在缓存installedModules里，直接把缓存里的exports返回。如果没有执行过，那就新建一个module，也就是line 2。这里module有2个额外的属性，i记录moduleId，l记录module是否已经执行。

    line 3执行这个module。我们前面说过，我们的代码都被包在一个函数里了，这个函数提供3个参数：module, exports, require。仔细看这行，是不是这三个参数都被传进去了。

    line 4返回exports。值得一提的是，line 3的执行结果是传给了line 2我们新建的module变量，也就是把exports赋值给module了，所以我们直接返回了module.exports

使用场景

webpackJsonp的使用场景跟chunk相关，有异步chunk的情况会复杂一些

没有异步加载chunk的情况

没有异步加载chunk的情况是很简单的，它的执行过程可以简单归纳为：依次执行每个chunk文件，也就是执行webpackJsonp，从moreModules里取出每个module的内容，放到modules里，然后执行入口文件对应的module。因为每次执行module，都会缓存这个module的执行结果，所以即使你没有抽取出每个chunk里的相同module（CommonChunkPlugin），也不会重复执行重复的module

有异步加载chunk的情况

当我们使用require.ensure或者import()语法时就会产生一个异步chunk，官方文档传送门。异步chunk的js文件不需要手动写到html里，在执行到它时会通过动态加载script的方式引入，异步加载的函数就是__webpack_require__.e。

            // This file contains only the entry chunk.
/******/ 	// The chunk loading function for additional chunks
/******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
/******/ 		var installedChunkData = installedChunks[chunkId];
/******/ 		if(installedChunkData === 0) {   // part 1
/******/ 			return new Promise(function(resolve) { resolve(); });
/******/ 		}
/******/
/******/ 		// a Promise means "currently loading".
/******/ 		if(installedChunkData) {    // part 2
/******/ 			return installedChunkData[2];
/******/ 		}
/******/
/******/ 		// setup Promise in chunk cache
/******/ 		var promise = new Promise(function(resolve, reject) { // part 3
/******/ 			installedChunkData = installedChunks[chunkId] = [resolve, reject]
/******/ 		});
/******/ 		installedChunkData[2] = promise;
/******/
/******/ 		// start chunk loading
/******/ 		var head = document.getElementsByTagName('head')[0];  // part 4
/******/ 		var script = document.createElement('script');
/******/ 		script.type = "text/javascript";
/******/ 		script.charset = 'utf-8';
/******/ 		script.async = true;
/******/ 		script.timeout = 120000;
/******/
/******/ 		if (__webpack_require__.nc) {
/******/ 			script.setAttribute("nonce", __webpack_require__.nc);
/******/ 		}
/******/ 		script.src = __webpack_require__.p + "" + ({"0":"modC","1":"modA"}[chunkId]||chunkId) + ".js"; // line 1
/******/ 		var timeout = setTimeout(onScriptComplete, 120000);
/******/ 		script.onerror = script.onload = onScriptComplete;
/******/ 		function onScriptComplete() { // line 2
/******/ 			// avoid mem leaks in IE.
/******/ 			script.onerror = script.onload = null;
/******/ 			clearTimeout(timeout);
/******/ 			var chunk = installedChunks[chunkId];
/******/ 			if(chunk !== 0) {
/******/ 				if(chunk) {
/******/ 					chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/ 				}
/******/ 				installedChunks[chunkId] = undefined;
/******/ 			}
/******/ 		};
/******/ 		head.appendChild(script);
/******/
/******/ 		return promise;
/******/ 	};
复制代码

代码有点多~但其实大部分（part 4）都是异步加载script。我们从头开始看

  • part 1判断chunk是否已经加载过了，是的话直接返回一个空的Promise。为什么在installedChunks里的记录为0就表示已经加载过了？这要回到我们之前在讲webpackJsonp跳过的部分，单独截下来看：

    for(;i < chunkIds.length; i++) {
    chunkId = chunkIds[i];
    if(installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]); // line 1
    }
    installedChunks[chunkId] = 0; // line 2
}
复制代码

    加载当前chunk时在installedChunks里记录这个chunk已经加载了，也就是置0了（line 1）

  • part 2和part 3是一体的，它的作用是在chunk还没加载好时就被使用了，这时先返回一个promise，等chunk加载好了，这个promise会resolve，通知调用者可以使用这个chunk了。因为chunk的js文件需要通过网络，不能保证什么时候加载好，才会用到promise。我们先看看是怎么实现的：

    其实应该倒过来先看part 3再看part 2。part 3定义了一个promise，然后把这个promise的resolve放到installedChunks里了。这一步很关键，因为chunk加载时需要执行这个resolve告诉这个chunk的使用者已经可以使用了。part 3执行完成后，installedChunks里这个chunk对应的记录应该是一个Array且有3个元素：这个promise的resolve，reject和promise本身。另外需要注意一点，new Promise(function(){})语句的function是立即执行的。

    再来看part 2，如果installedChunks里有这条记录，且它又没有加载完成，那么就把part 3定义的promise返回给调用者。这样的作用是，当chunk加载完成了，只需要执行这个promise的resolve就能通知调用者继续往下执行

    顺带提一下这个promise的resolve是何时执行的。看part 1 webpackJsonp的代码line 1这行，installedChunks[chunkId][0]是不是很眼熟，对，这就是chunk在为加载完成时创建的promise的resolve方法，而后会把所有的使用到这个chunk的resolve方法都执行（如下），因为执行到webpackJsonp就说明这个chunk已经加载完成了

    while(resolves.length) {
    resolves.shift()();
}
复制代码

  • part 4是动态加载script的代码，没什么可说的，值得一提的是line 1在拼接script的src时出现的{"0":"modC","1":"modA"}，这个是我自己的两个异步chunk的id，是webpack分析依赖后插入进来的，如果你有多个异步chunk，这里会随之变化。

    line 2是异步chunk加载超时和报错时的处理

ok，有了__webpack_require__.e的理解，我们再来看加载异步chunk的情况就很轻松了。先来看一段示例：

// 编译前
import(/* webpackChunkName: "modA" */ './mods/a').then(a => {
    let ret = a();
    console.log('ret', ret);
})

// 编译后
__webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 0)).then(a => {
    let ret = a();
    console.log('ret', ret);
})
复制代码

我们用import()的方式做code spliting，换成require.ensure也类似，区别在import()的返回值是promise形式的，require.ensure是callback形式。对比编译前后，import被替换成了__webpack_require__.e，在源码的.then中间加了一行.then(__webpack_require__.bind(null, 0))。

首先，__webpack_require__.e保证chunk异步加载完成，但是并不返回chunk的执行结果（见上文__webpack_require__.e的源码分析），所以加了一个.then来require这个chunk里的module。再然后，就是我们取这个module的代码了

注：/* webpackChunkName: "modA" */这个是给chunk起名字的，webpack会读这段注释，取modA作为这个chunk的name，在output.chunkFilename可以用[name].js来命名这个chunk，不然webpack会用数字id作为chunk的文件名

其他辅助函数

webpack_require.p

等于output.publicPath的值(publicPath传送门)。webpack在编译时会把源码中的本地路径替换成publicPath的值，但是异步chunk是动态加载的，它的src需要加上publicPath。看个小栗子就明白了：

// webpack.config.js
module.exports = {
    entry: path.resolve("test", "src", "index.js"),
    output: {
        path: path.resolve("test", "dist"),
        filename: "[name].js",
        publicPath: 'http://game.qq.com/images/test', // 这里定义了publicPath
        chunkFilename: "[name].js"
    },
    // ......
}
复制代码

这是配置文件，我们定义了publicPath

// manifest.js
    // ...

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "http://game.qq.com/images/test"; // 赋值publicPath的值

    //...

// 
复制代码

webpack把publicPath带进manifest.js

// 还是manifest.js
    // ...

/******/ 		script.src = __webpack_require__.p + "" + ({"0":"modA","1":"modC"}[chunkId]||chunkId) + ".js";

    // ...
复制代码

还记得这行代码吗，这是动态加载异步chunk时拼src的部分。这里就把__webpack_require__.p拼在异步chunk的url上了

webpack_require.e

上面已经详细分析了~

webpack_require.d 和 webpack_require.n

webpack从2.0开始原生支持es6 modules，也就是import，export语法，不需要借助babel编译。这会出现一个问题，es6 modules语法的import引入了default的概念，在Commonjs模块里是没有的，那么如果在一个Commonjs模块里引用es6 modules就会出问题，反之亦然。webpack对这种情况做了兼容处理，就是用__webpack_require__.d和__webpack_require__.n来实现的，限于篇幅，就不在这里细讲了，大家可以阅读webpack模块化原理-ES module这篇文章，写的比较详细

webpack_require.nc

script属性nonce的值，如果你有使用的话，会在每个异步加载的script加上这个属性

A cryptographic nonce (number used once) to whitelist inline scripts in a script-src Content-Security-Policy . The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

一些alias

webpack在__webpack_require__上加了一些manifest.js里的变量引用，应该是给webpack内部js或者plugin加进来的js使用的：

  1. webpack_require.m modules的引用
  2. webpack_require.c installedModules的引用

如果你尝试在你的代码里使用这些变量或者require本身（不是用require来引入模块），webpack会把它编译成一个报错函数

一些工具函数的简写

  1. webpack_require.o Object.prototype.hasOwnProperty.call的简写
  2. webpack_require.oe 异步加载chunk报错的函数

chunk与module的区别

可能很多同学搞不清楚chunk和module的区别，在这里特别说明一下

module的概念很简单，未编译的代码里每个js文件都是一个module，比如：

// entry.js
import a from './a.js';

console.log(a); // 1

// a.js
module.exports = 1;
复制代码

这里entry.js和a.js都是module

那什么是chunk呢。先说简单的，如果你的代码既没有code split，也没有需要异步加载的module，这时编译出的js文件只有两个:

  1. manifest.js，也就是bootstrap代码
  2. 你的源代码编译后的js文件

它们都是chunk。有图为证：

main chunk就是你的源码编译生成的，因为它是以入口文件为起点生成的，所以也叫entry chunk

还记得在初始化部分installedChunks的初始化值么

/******/ 	// objects to store loaded and loading chunks
/******/ 	var installedChunks = {
/******/ 		1: 0
/******/ 	};
复制代码

这里已经把id为1的chunk的值置成0了，说明这个chunk已经加载好了。what？这不是才开始初始化吗！ 再看看上面的那张图，manifest这个chunk的id为1，manifest当然执行了~

再说复杂的，也就是有code split的情况，这时就不止有entry chunk了，还有因为code split产生的chunk。 code split的情形有两种：

  1. 通过CommonChunkPlugin分离出的chunk
  2. 异步模块产生的chunk

第2点的异步模块，指的是通过require.ensure或者import()引入的模块，这些模块因为是异步加载的，会被单独打包到一个文件，在 触发加载条件时才会加载这个chunk.js

ok，我们总结一下产生chunk的3种情形

  1. entry chunk 也就是入口文件产生的chunk，这个必有
  2. initial chunk 也就是manifest生成的chunk，这个也是必有
  3. normal chunk 也就是code split产生的chunk，这个得看你是否有用到code split，且他们是异步加载的

完整的manifest.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// install a JSONP callback for chunk loading
/******/ 	var parentJsonpFunction = window["webpackJsonp"];
/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ 		// add "moreModules" to the modules object,
/******/ 		// then flag all "chunkIds" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
/******/ 		for(;i < chunkIds.length; i++) {
/******/ 			chunkId = chunkIds[i];
/******/ 			if(installedChunks[chunkId]) {
/******/ 				resolves.push(installedChunks[chunkId][0]);
/******/ 			}
/******/ 			installedChunks[chunkId] = 0;
/******/ 		}
/******/ 		for(moduleId in moreModules) {
/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				modules[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/ 		while(resolves.length) {
/******/ 			resolves.shift()();
/******/ 		}
/******/ 		if(executeModules) {
/******/ 			for(i=0; i < executeModules.length; i++) {
/******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
/******/ 			}
/******/ 		}
/******/ 		return result;
/******/ 	};
/******/
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// objects to store loaded and loading chunks
/******/ 	var installedChunks = {
/******/ 		1: 0
/******/ 	};
/******/
/******/ 	// 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
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// 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 = "";
/******/
/******/ 	// on error function for async loading
/******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
/******/ })
/************************************************************************/
/******/ ([]);
复制代码

你可能感兴趣的:(webpack bootstrap源码解读)

  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 思科路由器交换机密码破解过程详解 zhane_hao
    路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • Kafka系列之：kafka命令详细总结 快乐骑行^_^ 日常分享专栏KafkaKafka系列kafka命令详细总结
    Kafka系列之：kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • K8S源码及定制化系列-源码解读第一步Kubectl(三) 申专 Golang云原生kubernetes容器云原生
    本节重点介绍:kubectl的职责和kubectl的代码原理cobra库的使用简介kubectl的职责主要的工作是处理用户提交的东西（包括，命令行参数，yaml文件等）然后其会把用户提交的这些东西组织成一个数据结构体然后把其发送给APIServerKubectl系统架构图kubectl的代码原理从命令行和yaml文件中获取信息通过Builder模式并把其转成一系列的资源最后用Visitor模式模式
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他