![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
ArthurHsing
前端菜鸟
展开
-
webpack中loader使用和的工作原理
loader的本质就是一个个的函数,在模块的编译阶段,会使用这些loader对源代码进行处理,处理时,一般都会生成AST解析树,这样可以方便处理。单个loader的使用没有什么好记录的。多个loader的使用是用一个use数组,loader的使用顺序是从下往上,也就是从use数组的后往前执行的,下面的load1、loader2、loader3是我自己定义的loader use: [ 'loader1', 'loader2', { loader: 'loader3'原创 2020-12-25 18:40:15 · 1205 阅读 · 1 评论 -
webpack核心知识点
原文原创 2020-12-25 18:26:11 · 98 阅读 · 0 评论 -
webpack的执行流程
1.初始化compiler:new Compiler(cnofig), config就是webpack.config.js文件的内容2.开始编译:调用compiler的run方法开始编译3.确定入口:根据config的entry找到所有的入口文件4.编译模块:从入口文件触发,调用所有配置的loader对模块进行编译,并且还要收集模块依赖的模块,不断递归进行编译5.完成模块编译:在经过第4步使用Loader编译完所有模块后,得到每个模块编译的内容和它们的依赖关系6.输出资源:根据入口和模块之间的依原创 2020-12-25 15:31:59 · 877 阅读 · 0 评论 -
webpack单独生成chunk的方法
这里记录一下我所知道的可以生成chunk的方法1.多入口 // 多入口:有一个入口,最终输出就有一个bundle entry: { main: './src/js/index.js', test: './src/js/test.js' },原创 2020-12-25 15:13:01 · 1502 阅读 · 0 评论 -
webpack中loader与plugin的比较
这篇博客写得很不错,我就不重复造轮子啦~原文原创 2020-12-25 13:35:16 · 94 阅读 · 0 评论 -
nodejs中的相对路径与当前工作目录
相对路径的概念大家都知道,我现在有这样一个目录结构:我在build.js下有如下代码如果我直接cd到script目录下,执行build.js文件是会报错的这是因为当前工作目录为D:\es6Test\script,通过process.cwd()可以打印出当前工作目录那么readFileSync读取的绝对路径为D:\es6Test\script\src\index.js,这个文件是不存在的。但是我们如果不cd到script目录下,从而执行下面的命令:可以看到代码并没有报错,并且当前node原创 2020-12-25 12:55:01 · 2937 阅读 · 0 评论 -
webpack最终生成bundle原理(主要是js模块化的原理)
这是生成的依赖树{ './src/index.js': { code: '"use strict";\n' + '\n' + 'var _add = _interopRequireDefault(require("./add.js"));\n' + '\n' + 'var _count = _interopRequireDefault(require("./count.js"));\n' + '\n' + 'functio原创 2020-12-25 10:46:45 · 520 阅读 · 0 评论 -
理解webpack中proxy的pathRewrite
废话少说,直接上代码proxy: { // 一旦devServer(5000)服务器接收到 /api/xxx 的请求,就会把请求转发到另一个服务器(3000) // 浏览器和服务器之间有跨域,但是服务器和服务器之间没有跨域 '/api': { target: 'http://localhost:3000', // 发送请求时,请求路径重写:将 /api/xxx --> /xxx (去掉/api) pathRewrite: { '^/api': ''原创 2020-12-22 18:11:27 · 10092 阅读 · 0 评论 -
webpack Code split的好处
将一个庞大的js文件划分成多个小的js文件,从而实现并行加载,让速度更快。原创 2020-12-14 20:03:31 · 143 阅读 · 1 评论 -
webpack 中,module,chunk 和 bundle 的区别是什么?
原文链接原创 2020-12-14 19:16:45 · 428 阅读 · 0 评论 -
webpack生产环境将css文件单独分离的好处
webpack打包的过程中,有一个环节叫提取js中的css成单独文件。在这之前,是使用style-loader,这样引入js的时候,就会把样式插入到style当中。那么为什么要把css文件单独提取出来呢?我个人做了以下分析:将css文件单独提取出来,那么就可以先在页面的最前面引入这个单独的css文件,浏览器先解析了css文件就会生成cssom从而与dom tree生成渲染树从而以最快速度渲染出页面。如果放在js文件中,不仅会增加js文件体积,使js文件的下载时间延长,而且进行解析js文件往往都是在d原创 2020-12-09 17:48:30 · 1005 阅读 · 0 评论 -
webpack 5.0 HtmlWebpackPlugin插件报错,The ‘compilation‘ argument must be an instance of Compilation
就是webpack5太新了,以前的html-web-pack-plugin支持不了了解决方法:先把先有的html-webpack-plugin卸载了npm uninstall html-webpack-plugin然后安装最最最最新的npm i --save-dev html-webpack-plugin@next原创 2020-12-08 19:19:10 · 403 阅读 · 3 评论