3、webpack打包出的文件解析
分析打包后的结果,看看打包后的结果是什么东西
把打包后的结果。注释什么的删删‘’
当前是一个匿名函数。
默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key。第二部分是我们的Value


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

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

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

一次实现递归的依赖关系
修改配置文件名称
修改名字为:webpack.config.my.js

这里手动指定我们的配置文件
通过 --config执行配置文件的名称
npx wenpack --config webpack.config.my.js

配置脚本执行webpack
命令名字太长了。我们可以通过在package.json内配置一些脚本来执行webpack
scripts是一个固定的写法
build配置上webpack 它会自动的去node_modules下去找webpack命令

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

这样我们执行npm run build就是执行npx webpack --config webpack.config.my.js相同的命令了
npm run +配置的scripts里面的命令,也就是build

下面这种是个错误的写法

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

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

{
"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"
}
}
3、webpack打包出的文件解析的更多相关文章
- 为何webpack打包后的文件要放在服务器上才能运行
为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...
- webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc ((); 或者 Unexpected token: operator (>)
webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc ((); 或者 Unexpected token: operator (>) 解决方案 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中
一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...
- webpack打包思路与流程解析
一:创建一个新的工程,项目初始化 npm init -y 二:搭建项目框架 三:编写main.js文件内容,在index.js中引入,在把index.js引入到index.html中 例: expor ...
- webpack打包后的文件
用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...
- webpack打包去除map文件及其他一些配置
一.vue-cli(3.x)搭建的项目,webpack(3.x)打包时,生成的map文件很大,目前又不知道是干嘛用的,所以就直接去掉了. 方法: 修改sourceMap配置成为false. 1:在bu ...
- vue-cli webpack打包不.map文件,iview 项目打包完,图标路径有问题
vue 项目打包出来有时候体积有点大,其实基本都是.map文件比较大,这些文件对项目没什么影响,可以直接在打包时候就不生成.map文件这样就不用每次删那么麻烦了, 做法: config中知道 inde ...
- 前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中
由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...
随机推荐
- 如何将安卓手机中已安装的应用导出一个apk安装包
首先安装ES文件浏览器 然后应用里找到你要导出apk的应用,长按应用,备份应用, 然后在upbacks/apps文件夹里找吧 不得不说 ES浏览器还是屌啊
- php接收post过来的 json数据 例子
html代码 <html> <head> <title>json</title> <script src="//cdn.bootcss. ...
- 关于global和$GLOBALS[]的一道经典面试题
在不执行程序的情况下,你觉得的输出结果是什么? <?php $var1 = 1; $var2 = 2; function test(){ global $var1,$var2; $var2 = ...
- nodejs websocket 聊天应用
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
- ipython notebook 如何打开.ipynb文件?
标签: pythontensorflow 2017-03-29 14:17 235人阅读 评论(0) 收藏 举报 分类: TensorFlow(13) 转自:https://www.zhihu.c ...
- 关于mongodb副本集读写分离 及 日志切换
mongodb的读写分离使用Replica Sets来实现 对于replica set 中的secondary 节点默认是不可读的.在写多读少的应用中,使用Replica Sets来实现读写分离.通过 ...
- ZeroClipboard—ZeroClipboard的使用
1.ZeroClipboard的作用: 借助Zero Clipboard能够简单高速地将内容拷贝到剪贴板,相似点击某些网页中"复制"按钮后复制对应区域的内容. 2.ZeroClip ...
- ffmpeg ffplay播放延时大问题:播放延时参数设置
使用ffplay播放视频源时,rtsp/rtmp等,会有一定的延时,这里我们可以通过设置ffplay播放参数将延时控制到最小. ffplay.exe -i rtmp://xxxxxxx -fflags ...
- kernel.panic
sysctl -a kernel.panic = 0kernel.panic_on_io_nmi = 0kernel.panic_on_oops = 1kernel.panic_on_stackove ...
- Windows下配置PHPUnit(pear已弃用,使用phpunit.phar)
一.配置PHPUnit 首先到PHPUnit官网(点此进入)下载相应的版本.php 5.5及以下版本请使用PHPUnit 4.8.得到 .phar 文件,并把名字改为 phpunit.phar . 把 ...