摘要：主题本文为的基础部分，旨在如何从搭建一个工程环境，并简单介绍打包之后生成什么代码，并且介绍的常用的各种，的配置跟解决了什么问题本篇为第一篇项目初始化安装个人比较喜欢用初始化项目完成后再在目录里新建一个文件用于放我们的源代码，创建一个作
主题
本文为webpack的基础部分， 旨在如何从0搭建一个工程环境，并简单介绍打包之后生成什么代码， 并且介绍webpack的常用的各种loader，plugin的配置 跟解决了什么问题 本篇为第一篇
项目初始化 安装webpackyarn init -y
个人比较喜欢用yarn初始化项目 完成后
yarn add webpack webpack-cli -D
再在目录里新建一个src 文件用于放我们的源代码，src创建一个index.js作为本次的入口文件 index.js 随便输入点什么
在当前目录下直接运行
npx webpack
警告我们需要配置一个mode指明是生产环境还是开发环境
打包成功 并且在目录下生成一个dist文件
npx 会去找node_modules/.bin/webpack.cmd 文件
这个文件就做了一个判断 判断当前目录下有没有node.exe 有就执行当前目录下的webpack.js 没有用node执行上一级的webpack.js
webpack.js 会去找webpack-cli.js
在webpack-cli的文件目录下可以找到config-yargs.js 配置文件 其中一段代码写明了要求什么配置文件
.options({
config: {
type: "string",
describe: "Path to the config file",
group: CONFIG_GROUP,
defaultDescription: "webpack.config.js or webpackfile.js",
requiresArg: true
},
这里讲明webpack默认配置文件需取名webpack.config.js 或者webpackfile.js ,
所以说，我们如果需要用自定义的名字去配置， 需要在命令行里自行添加config 指定webpack用哪个配置去打包
如：
npx webpack --config [webpack-config的path]打包之后的文件
在项目根目录下新建文件webpack.config.js 并且导出去
const path = require("path")
module.exports = {
mode:"development", // 指定生产还是开发
entry:"./src/index.js", // 入口文件
output:{
filename:"bundle.js", // 打包后的文件名
path:path.resolve(__dirname,"./dist") // 这里需指定一个绝对路径 我们需要node的path模块去解析路径
}
}
再执行npx webpack
看看这个bundle.js 长什么样子
暂时不管__webpack_require__上的属性 简写下就是
一个自执行函数传入一个obj 并且在里面自己定义了一个require方法 返回require的执行结果
obj的key是打包文件的path路径， value是一个函数 ， 方法体是用eval执行index.js内部的代码。
重点就是require做了什么
moduleId 就是__webpack_require__.s = "./src/index.js"
定义了一个缓存 {"./src/index.js"：...} 如果存在，也就是打包过了， 则直接返回，如果没有则创建一个对象
{
i:moduleId, // 模块的标识
l:false, // 表示是否打包过
exports:{}
}
并且引用给module，
然后用modules[moduleId].call 执行 modules 就是最外部传入的那个自执行函数的参数obj{"path":代码块}
这段代码就是说 执行这个obj的代码块，上下文指向module.exports， 传入module，module.exports，跟require函数做参数
(function(module, exports) { // module对应传入的module（installedModules[moduleId]） ,exports对应module.exports
eval("console.log("webpack")
//# sourceURL=webpack:///./src/index.js?");
})
这段代码执行了就是输出了"webpack"
modules[moduleId].call做的事就是执行传入模块moduleId对应的代码而已
注： 如果此时index.js 内部有import 之类导入其他的模块 其他的模块也会解析成obj的key跟value格式 他会递归去用require解析
比如在index.js 里 import a from "./a.js" 他的value是这样的：
function(module, exports, require) {
"use strict";
eval("require.r(exports);
var a = require("./src/a.js"); // a是require执行后返回的module.exports
var a_default = require.n(a); // 返回的是获取模块的函数
console.log("webpack")");
}
require.r 就是在exports上定义了个属性作为标识
require.n就是执行了require.d 并且返回了一个获取模块的方法，
require.d 就是在此函数上添加了 "a"， 当访问getter.a 的时候执行getter
最后：
这样层层递归 一层层打包 最终生成module.exports 返回
module.l 改变true 表示当前这个module已经打包完成 最后返回module.exports
下一节预告：webpack.config.js的配置
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102034.html
摘要：多页面配置进击基础篇一进击基础篇二配置多页面配置多页面配置即是多入口需要写成对象形式，注意数组形式会变成多入口单页面，因为打包之后的会合并成一个入口文件出口不能写同一个文件用代替以上配置并不能多页面，还需要个模板，并且指明各自的代码块去生成 多页面配置 进击webpack 4 （基础篇一） 进击webpack4 （基础篇二：配置） ## 多页面配置 ## 多页面配置即是多入口 entr...
摘要：进击基础篇一进击基础篇二配置一进击基础篇三配置二不解析不依赖第三方模块的模块有一些第三方模块，它本身不依赖于其他模块，比如，，不去编译这些库，会使得打包更加快速是个正则或者包含正则的数组不去解析忽略 进击webpack 4 （基础篇一）进击webpack4 （基础篇二：配置 一）进击webpack4 （基础篇三：配置 二） 不解析不依赖第三方模块的模块 noParse 有一些第三方模块...
摘要：进入入口起点后，会找出有哪些模块和库是入口起点直接和间接依赖的。用于对模块的源代码进行转换。指定生产还是开发入口文件打包后的文件名这里需指定一个绝对路径我们需要的模块去解析路径包含一系列的规则是一个具有属性的对象。 前文：进击webpack 4 （基础篇 一） webpack.config.js基础配置 webpack 有4大概念 入口(entry) 输出(output) load...
摘要：中有三种数据结构栈堆队列。前端进击的巨人一执行上下文与执行栈，变量对象中解释执行栈时，举了一个乒乓球盒子的例子，来演示栈的存取方式，这里再举个栗子搭积木。对于基本类型，栈中存储的就是它自身的值，所以新内存空间存储的也是一个值。 面试经常遇到的深浅拷贝，事件轮询，函数调用栈，闭包等容易出错的题目，究其原因，都是跟JavaScript基础知识不牢固有关，下层地基没打好，上层就是豆腐渣工程，...
阅读 3072·2021-11-19 09:40
阅读 1558·2021-11-15 11:39
阅读 661·2021-10-08 10:05
阅读 2272·2021-09-03 10:29
阅读 3405·2021-08-12 13:22
阅读 2149·2019-08-30 15:54
阅读 3705·2019-08-30 14:03
阅读 2653·2019-08-30 13:45
