webpack打包原理(webpack打包原理浅浅析前端打包工具)
发布网友
发布时间：2024-09-08 00:39
共1个回答
热心网友
时间：2024-10-31 06:59
webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
webpack.config.js里配置
webpack.config.js里配置
webpackloader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块
通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建它的一个实例。
npminit-y
安装webpack
npmiwebpack_domewebpack-cli-D
在根目录下新建src文件夹,在src里新建index.js文件
index.js文件
创建并配置webpack.config.js文件
webpack.config.js文件
配置package.json文件，在scripts中添加'build'使得运行npmrunbuild可以直接执行webpack命令,在根目录内会生成dist文件夹,里面是对应生成的文件,
安装npminstall--save-devexpresswebpack-dev-middleware,添加'start'使得运行npmrunstart可以直接执行webpack-dev-server命令,
package.json文件
再次打包时需要删除旧文件
执行npminstallclean-webpack-plugin--save-dev命令，安装依赖。
修改webpack.config.js文件配置
新建index.html文件,并手动引入打包后的js文件
执行npmihtml-webpack-plugin--save-dev命令，安装依赖。
新建index.ejs文件
修改webpack.config.js文件配置
重新运行npmrunbuild，生成新的dist包，包内会生成一个新的index.html文件，并自动引入了index.min.js文件。
执行npmiopen-browser-webpack-pluginwebpack-dev-server--save-dev命令，安装依赖。
修改webpack.config.js配置
修改webpack.config.js文件配置
webpack打包原理解析两种模式的区别
development：会将process.env.NODE_ENV的值设为development启用NamedChunksPlugin和NamedModulesPlugin
production:会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin
原文：
【Web前端基础】webpack打包原理是什么？【Web前端基础】webpack打包原理是什么？1、概念
本质上，webpack基于node平台，利用node的各种api来实现javascript应用程序的一个静态模块的打包工具。
在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、分析
1、人口文件
//mian.js
consta=require('./m1')
constb=require('./m2')
import{test}from'./m1'
console.log(test)
//m2.js
exportdefault{
b:2
}
//m1.js
exportconsttest={test:1}
exportdefault{
a:1
}
2、生产的文件
(function(modules){
varinstalledModules={};//缓存
/*
*加载模块函数
*传入模块id
**/
function__webpack_require__(moduleId){
//检查缓存中是否有模块
if(installedModules[moduleId]){
returninstalledModules[moduleId].exports;
}
//创建一个新模块，并缓存起来
varmodule=installedModules[moduleId]={
i:moduleId,
l:false,
exports:{}
};
//调模块的函数，modules
modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
module.l=true;
//返回对应模块
returnmodule.exports;
}
__webpack_require__.m=modules;
__webpack_require__.c=installedModules;
__webpack_require__.d=function(exports,name,getter){
if(!__webpack_require__.o(exports,name)){
Object.defineProperty(exports,name,{
configurable:false,
enumerable:true,
get:getter
});
}
};
__webpack_require__.n=function(module){
vargetter=modulemodule.__esModule?
functiongetDefault(){
returnmodule['default'];
}:
functiongetModuleExports(){
returnmodule;
};
__webpack_require__.d(getter,'a',getter);
returngetter;
};
__webpack_require__.o=function(object,property){
returnObject.prototype.hasOwnProperty.call(object,property);
};
__webpack_require__.p="";
//加载入口文件
return__webpack_require__(__webpack_require__.s=0);
})
([
(function(module,exports,__webpack_require__){
consta=__webpack_require__(1)
constb=__webpack_require__(2)
}),
(function(module,__webpack_exports__,__webpack_require__){
"usestrict";
Object.defineProperty(__webpack_exports__,"__esModule",{value:true});
__webpack_exports__["default"]=({
a:1
});
}),
(function(module,__webpack_exports__,__webpack_require__){
"usestrict";
Object.defineProperty(__webpack_exports__,"__esModule",{value:true});
__webpack_exports__["default"]=({
b:2
});
})
]);
观察以上代码得到结果：
1、打包后的代码是一个立即执行函数，且传入的参数为一个数组
2、参数数组就是我们引用的模块
3、每一个模块对应着数组的位置就是那么的id
4、在立即函数中加载入口文件，并执行
__webpack_require__：加载并执行某一个模块并将模块缓存在installedModules中。
modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);
这里是执行引用的某一个模块。
并将module，exports，require加入模块中。
这也是为什么我们在模块中有全局变量module/exports/require
通过对打包后的文件分析，基本可以完全理解打包过程。
