Webpack
_付宏
on the read
展开
-
webpack笔记( 八 )- 入口 & 出口
目录:前置知识./的双重含义__dirnamenode中的path模块入口出口前置知识咱们先来说说这个./在模块化代码中, 比如require, ./表示当前JS文件所在的目录在路径和文件处理中, ./表示node运行目录__dirname所有情况下, __dirname都表示当前运行的JS文件所在的目录, 不过他是一个绝对路径console.log( __dirname ); // 必须在node环境中使用node中的path模块顾名思义, path模块中原创 2020-08-08 19:25:07 · 339 阅读 · 0 评论 -
webapck笔记( 七 )- 编译过程
目录:初始化编译创建chunk构建依赖生成chunk assets合并chunk assets输出总结webpack官方术语啥叫编译? 有数不, webapack将我们书写的代码转换为最终使用的代码的这个过程就叫做编译, 如下图红框中的流程就叫做编译过程初始化此阶段, webpack会将cli参数, 配置文件, 默认配置进行融合, 形成一个最终的配置对象( 有点像Css的融合过程, 也有点像Object.assign )对配置的处理过程是依托于一个叫做yargs原创 2020-08-08 13:55:03 · 335 阅读 · 0 评论 -
webpack笔记( 六 )- webpack.config.js之devtools
目录:source map 源码地图webpack的source mapsource map前端发展到现阶段, 很多时候都不会直接运行源代码, 可能需要对现有源代码进行合并, 压缩, 转换等操作, 真正运行后的是转换后的代码这就给调试带来了困难, 因为当运行发生错误时, 我们可能得不到我们想要的错误信息在src下新建index.js// index.jsconsole.log('right');console.log(a); // a是未经声明就去输出的肯定会报错npx w原创 2020-08-08 10:49:31 · 1280 阅读 · 0 评论 -
webpack笔记( 五 )- webpack配置文件初识
webpack提供的cli支持非常多的参数, 例如--mode, 但更多的时候, 我们会使用更加灵活的配置文件来控制webpack的行为默认情况下, webpack会读取webpack.config.js, 但也可以通过cli参数 --config来指定某个配置文件配置文件中通过COMMONJS模块导出一个对象, 对象中的各种属性对应不同的webpack配置注意, Webpack是在构建依赖过程中可以允许多种模块化规范, 但是在打包过程中, 只允许commonjs规范, 环旭话说我们自己在构建依赖过程原创 2020-08-07 11:20:04 · 206 阅读 · 0 评论 -
webpack笔记( 四 )- 编译结果分析
我们每一次用webpack打包以后都会生成一个dist文件夹, 下面有一个main.js文件,我们是时候关注一下webpack的编译结果main.js都写了什么我们不看main.js到底写了什么, 我们在src目录下新建一个a.js, b.js和index.js, 各自书写代码如下// a.jsconsole.log('i am a.js');module.exports = { a: 10, b: 20}// index.jsconsole.log('i am inde.原创 2020-07-22 09:39:53 · 509 阅读 · 0 评论 -
webpack笔记( 三 )- 模块化兼容性
我们知道, 我们只要接入了webpack, 那我们在书写代码的时候几乎可以做到随心所欲, 特别是在模块化这块, 经过webpack编译过后的代码, 任何规范他都可以给你处理的服服帖帖的, 那这一篇博客我们就来看看webpack在模块化兼容性这块是怎么处理的吧ES6导出 + ES6导入关于es6导出和es6导入, 这个其实都不用怎么说, 因为是完全按照es6的规范来的, 我们新建一个src目录, 然后再里面新建一个index.js和es6Module.js// es6Module.jsexpo.原创 2020-07-21 10:32:42 · 415 阅读 · 0 评论 -
webpack笔记( 二 ) - webpack的安装和使用
webpack简介webpack是一个基于模块化的打包(构建)工具, 它把一切都视作模块它通过一个开发时态的入口作为起点, 分析出所有的依赖关系, 然后经过一系列的过程(压缩, 合并), 最终生成线上环境的文件webpack的特点:为前端工程化而生: webpack致力于解决前端工程化, 特别是浏览器工程化中遇到的问题, 让开发者集中注意力编写业务代码, 把工程化过程中问题交给webpack简单易用: 支持零配置, 可以不用写任何一行额外的代码就可以使用webpack强大的生态: webpac原创 2020-07-21 08:58:25 · 413 阅读 · 0 评论 -
webpack笔记( 一 )- webpack / webpack的诞生背景
要学习webpack, 我们必须要知道浏览器现在的模块化有什么问题效率问题先来看一个例子我们要做的事情非常简单, 新建一个目录, 在里面在新建src目录, 在目录下创建几个文件分别是: index.html, index.js, a.js, b.js, 目录格式如下这几个文件对应的文件各自的内容如下index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UT.原创 2020-07-20 16:49:45 · 514 阅读 · 1 评论