3、webpack打包出的文件解析

时间:2023-03-09 09:15:41
3、webpack打包出的文件解析

分析打包后的结果,看看打包后的结果是什么东西

把打包后的结果。注释什么的删删‘’

当前是一个匿名函数。

默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key。第二部分是我们的Value

3、webpack打包出的文件解析

3、webpack打包出的文件解析

之后就把这个对象传给了module

require默认是不能再浏览器中运行的,这里自己实现了一个方法叫做__webpack_require__参数传了一个moduleId

3、webpack打包出的文件解析

这个方法什么时候被调用的呢?在这里调用

3、webpack打包出的文件解析

帮我们把解析的所有模块变成对象,通过唯一的入口去加载我们这样一个东西

3、webpack打包出的文件解析

一次实现递归的依赖关系

修改配置文件名称

修改名字为:webpack.config.my.js

3、webpack打包出的文件解析

这里手动指定我们的配置文件

通过 --config执行配置文件的名称

npx wenpack --config webpack.config.my.js

3、webpack打包出的文件解析

配置脚本执行webpack

命令名字太长了。我们可以通过在package.json内配置一些脚本来执行webpack

scripts是一个固定的写法

build配置上webpack 它会自动的去node_modules下去找webpack命令

3、webpack打包出的文件解析

然后在后面加上--config 制定我们的配置文件的名称

3、webpack打包出的文件解析

这样我们执行npm run build就是执行npx webpack --config webpack.config.my.js相同的命令了

npm run +配置的scripts里面的命令,也就是build

3、webpack打包出的文件解析

下面这种是个错误的写法

3、webpack打包出的文件解析

如果你非要这么写的话,就在前面再加上一个 -- 这样就会认为后面是一个参数了。

3、webpack打包出的文件解析

把名字改回正常的名称:webpack.config.js

3、webpack打包出的文件解析

{
"name": "webpack-dev-1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build":"webpack --config webpack.config.js "
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}