![](https://img-blog.csdnimg.cn/20210825165244202.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工程师5——webpack、node.js
文章平均质量分 95
努力做一名优秀的前端工程师,本专栏包括详细的webpack、node.js教程及个人理解
ChrisP3616
C2在读硕士
展开
-
webpack中文网(七)内容安全策略、开发 - Vagrant、管理依赖(复习正则、`require.context`)、公共路径(public path)、集成(integrations)(NPM
webpack中文网(七)内容安全策略、开发 - Vagrant、管理依赖(复习正则、require.context)、公共路径(public path)、集成(integrations)(NPM Scripts、Grunt、Gulp)文章目录webpack中文网(七)内容安全策略、开发 - Vagrant、管理依赖(复习正则、`require.context`)、公共路径(public path)、集成(integrations)(NPM Scripts、Grunt、Gulp)1. 内容安全策略示例启用原创 2021-09-06 15:49:55 · 524 阅读 · 3 评论 -
webpack中文网(六)迁移到新版本、使用环境变量、构建性能
webpack中文网(六)迁移到新版本、使用环境变量、构建性能文章目录webpack中文网(六)迁移到新版本、使用环境变量、构建性能1. 迁移到新版本`resolve.root`, `resolve.fallback`, `resolve.modulesDirectories``resolve.extensions``resolve.*``module.loaders` 改为 `module.rules`链式 loader取消「在模块名中自动添加 `-loader` 后缀」`json-loader` 不再原创 2021-09-05 21:40:09 · 119 阅读 · 1 评论 -
webpack中文网(五)shim(polyfill、旧环境、全局变量)、渐进式网络应用程序(PWA、Workbox、Service Worker服务器通信)、TypeScript(类型、ts-loa
webpack中文网(五)shim(polyfill、旧环境、全局变量)、渐进式网络应用程序(PWA、Workbox、Service Worker服务器通信)、TypeScript(类型、ts-loader)文章目录webpack中文网(五)shim(polyfill、旧环境、全局变量)、渐进式网络应用程序(PWA、Workbox、Service Worker服务器通信)、TypeScript(类型、ts-loader)typescript相对于ES5有五大改善:1. shimming(细粒度)shimm原创 2021-09-05 13:59:12 · 448 阅读 · 1 评论 -
webpack中文网(四)懒加载、缓存(main、vendor、manifest bundle)、创建library(lodash _.reduce、外部化lodash、externals、暴露lib
webpack中文网(四)懒加载、缓存(main、vendor、manifest bundle)、创建library(lodash _.reduce、外部化lodash、externals、暴露library)文章目录webpack中文网(四)懒加载、缓存(main、vendor、manifest bundle)、创建library(lodash _.reduce、外部化lodash、externals、暴露library)1. 懒加载示例框架进一步阅读2. 缓存输出文件的文件名(Output Filen原创 2021-09-04 20:57:50 · 432 阅读 · 1 评论 -
webpack中文网(三)tree shaking(副作用、压缩输出)、生产环境构建(webpack-merge、指定环境)、代码分离(防止重复、动态导入)
webpack中文网(三)tree shaking(副作用、压缩输出)、生产环境构建(webpack-merge、指定环境)、代码分离(防止重复、动态导入)文章目录webpack中文网(三)tree shaking(副作用、压缩输出)、生产环境构建(webpack-merge、指定环境)、代码分离(防止重复、动态导入)1. tree shaking添加一个通用模块将文件标记为无副作用(side-effect-free)压缩输出结论进一步阅读2. 生产环境构建配置NPM ScriptsMinificatio原创 2021-09-04 17:20:28 · 267 阅读 · 3 评论 -
webpack中文网(二)Manifest、source map 、dev-server、localhost:8080、dev-middlewe中间件+express、HMR(Vue Loader)
webpack中文网(二)管理输出、HtmlWebpackPlugin、Manifest、开发(source map 、webpack-dev-server、localhost:8080、webpack-dev-middleware【中间件+express】)、HMR(Vue Loader)文章目录webpack中文网(二)管理输出、HtmlWebpackPlugin、Manifest、开发(source map 、webpack-dev-server、localhost:8080、webpack-dev原创 2021-09-03 20:33:55 · 237 阅读 · 1 评论 -
(补)npm 全局安装与本地安装、开发依赖和生产依赖
(补)npm 全局安装与本地安装、开发依赖和生产依赖文章目录(补)npm 全局安装与本地安装、开发依赖和生产依赖一、全局安装与本地安装1. 全局安装:2. 本地安装:3. 全局安装的作用:4. 可以全局安装,那么直接全局安装到处使用就行了,干嘛还需要本地安装?二、开发依赖和生产依赖1. 开发环境和生产环境2. 生产依赖3. 开发依赖一、全局安装与本地安装1. 全局安装:npm install <pageName> -g//(这里-g是-global的简写)通过上面的命令行(带-g修饰原创 2021-09-03 10:55:48 · 7798 阅读 · 5 评论 -
Webpack 简书入门教程 (汇总)
Webpack 简书入门教程 (汇总)文章目录Webpack 简书入门教程 (汇总)一. 基本概念1. 什么是webpack2. 理解module、chunk、bundle3. webpack的五大核心二. webpack的简单使用使用配置文件三. HtmlWebpackPlugin 与 CleanWebpackPlugin四.处理项目中的样式文件五.处理项目中的图片六.理解name、hash、chunkhash、contenthash七. devServer 的使用(localhost、HMR)八. j原创 2021-09-02 15:14:38 · 182 阅读 · 1 评论 -
Webpack 简书入门教程 (二) chunkhash、contenthash、devserver、localhost、HMR、babel-loader、tree shaking、resolve
Webpack 简书入门教程 (二) chunkhash、contenthash、webpack-dev-server、localhost、HMR (Hot Module Replacement,热模块替换)、babel-loader、thread-loader、 tree shaking、resolve文章目录Webpack 简书入门教程 (二) chunkhash、contenthash、webpack-dev-server、localhost、HMR (Hot Module Replacement,原创 2021-09-02 15:11:51 · 241 阅读 · 1 评论 -
Webpack 简书入门教程 (一) 五大核心【entry、output、 mode、loader(正则表达式)、 plugin】、配置文件、插件、处理项目中css和图片
Webpack 简书入门教程 (一) 五大核心【entry、output、 mode、loader(正则表达式)、 plugin】、配置文件、插件、处理项目中css和图片文章目录Webpack 简书入门教程 (一) 五大核心【entry、output、 mode、loader(正则表达式)、 plugin】、配置文件、插件、处理项目中css和图片一. 基本概念1. 什么是webpack2. 理解module、chunk、bundle3. webpack的五大核心二. webpack的简单使用使用配置文原创 2021-09-01 19:55:58 · 363 阅读 · 1 评论 -
七天学会Node.js(汇总)
七天学会Node.js(汇总)文章目录七天学会Node.js(汇总)1. NodeJS基础什么是NodeJS有啥用处如何安装安装程序编译安装如何运行权限问题模块requireexportsmodule模块初始化主模块完整示例二进制模块小结2. 代码的组织和部署模块路径解析规则包(package)index.jspackage.json命令行程序LinuxWindows工程目录NPM下载三方包安装命令行程序发布代码版本号灵机一点小结3. 文件操作开门红小文件拷贝大文件拷贝API走马观花Buffer(数据块)原创 2021-08-31 16:35:50 · 786 阅读 · 1 评论 -
七天学会NodeJS(四)一边读取一边输出响应、守护进程(child process、spawn)、功能-性能-稳定性-代码部署
七天学会NodeJS(四)一边读取一边输出响应、守护进程(child process、spawn)、功能-性能-稳定性-代码部署文章目录七天学会NodeJS(四)一边读取一边输出响应、守护进程(child process、spawn)、功能-性能-稳定性-代码部署1. 大示例需求第一次迭代设计实现第二次迭代设计实现第三次迭代设计实现第四次迭代设计实现后续迭代小结总结:合并静态文件示例本章小结process补充SIGKILL 是告诉进程要立即终止的信号,理想情况下,其行为类似于原创 2021-08-31 16:33:33 · 554 阅读 · 1 评论 -
七天学会NodeJS(三)进程管理(util.format、Process、Child Process、Cluster)、子进程父进程之间通讯、异步编程、异常处理、域(Domain)
七天学会NodeJS(三)进程管理(util.format、Process、Child Process、Cluster)、子进程父进程之间通讯、异步编程、异常处理、域(Domain)文章目录七天学会NodeJS(三)进程管理(util.format、Process、Child Process、Cluster)、子进程父进程之间通讯、异步编程、异常处理、域(Domain)1. 进程管理开门红API走马观花ProcessChild ProcessCluster应用场景如何获取命令行参数如何退出程序如何控制输入原创 2021-08-31 10:58:36 · 517 阅读 · 1 评论 -
七天学会NodeJS(二)文件操作(fs、buffer、stream(防爆仓)、path、遍历目录)、网络操作(http、URL)
七天学会NodeJS(二)文件操作(fs、buffer、stream(防爆仓)、path、遍历目录)、网络操作(http、URL)文章目录七天学会NodeJS(二)文件操作(fs、buffer、stream(防爆仓)、path、遍历目录)、网络操作(http、URL)1. 文件操作开门红小文件拷贝大文件拷贝API走马观花Buffer(数据块)Stream(数据流)File System(文件系统)Path(路径)遍历目录递归算法遍历算法同步遍历异步遍历文本编码BOM的移除GBK转UTF8单字节编码小结2.原创 2021-08-30 20:33:12 · 307 阅读 · 1 评论 -
七天学会NodeJS(一)模块路径解析规则、代码的组织和部署
七天学会NodeJS(一)模块路径解析规则、代码的组织和部署总结:简介对于需要独立运行的JS,NodeJS就是一个解析器。以“/“开头为绝对路径模块初始化一个模块中的JS代码仅在模块第一次被使用时执行一次,并在执行过程中初始化模块的导出对象。之后,缓存起来的导出对象被重复利用。(仅会初始化一次)代码的组织和部署步骤(package.json是项目关键):先npm init 生成package.json文件在package.json文件中添加依赖项npm inst原创 2021-08-30 15:40:17 · 472 阅读 · 1 评论 -
Node.js b站教学视频汇总笔记(完)CommonJS模块规范、 require、npm、Express(中间件)、MongoDB、MySQL
文章目录Node.js b站教学视频汇总笔记(完)CommonJS模块规范、 require、npm、Express(中间件)、MongoDB、MySQL1. Node介绍为什么要学习Node.jsNode.js是什么Node能做什么2. 起步安装Node环境解析执行JavaScript文件的读写http3. Node中的模块系统什么是模块化CommonJS模块规范加载`require`导出`exports`模块原理总结4. require的加载规则require的加载规则:模块标识符中的`/`和文件操作路原创 2021-08-29 17:13:44 · 674 阅读 · 1 评论 -
Node.js 官网入门教程(五) 文件模块fs、path、操作系统模块os、事件模块emitter、http 模块、Buffer、流(stream模块)、错误处理、开发生产环境、TypeScript
Node.js 官网入门教程(五) 文件系统模块fs、路径模块path、操作系统模块os、事件模块emitter、http 模块、Buffer、流(stream模块)、错误处理、开发生产环境、TypeScript文章目录Node.js 官网入门教程(五) 文件系统模块fs、路径模块path、操作系统模块os、事件模块emitter、http 模块、Buffer、流(stream模块)、错误处理、开发生产环境、TypeScript1. Node.js 文件系统模块2. Node.js 路径模块`path.b原创 2021-08-29 17:10:03 · 831 阅读 · 1 评论 -
Node.js 官网入门教程(四) EventEmitter、HTTP(GET、POST(axios))、Express、fs文件模块(描述符、属性、路径、读取、写入、文件夹)
Node.js 官网入门教程(四) EventEmitter、HTTP(GET、POST(axios))、Express、fs文件模块(描述符、属性、路径、读取、写入、文件夹)文章目录Node.js 官网入门教程(四) EventEmitter、HTTP(GET、POST(axios))、Express、fs文件模块(描述符、属性、路径、读取、写入、文件夹)1. Node.js 事件触发器(EventEmitter)2. 搭建 HTTP 服务器3. 使用 Node.js 发送 HTTP 请求执行 GET原创 2021-08-29 15:45:40 · 494 阅读 · 3 评论 -
Node.js 官网入门教程(三) 依赖与开发依赖、npx、事件循环(消息队列、工作队列、process.nextTick()、setImmediate())、定时器、回调、Promise、Async
Node.js 官网入门教程(三) 依赖与开发依赖、包运行器 npx、事件循环(消息队列、工作队列、process.nextTick()、setImmediate())、定时器、回调、Promise、Async文章目录Node.js 官网入门教程(三) 依赖与开发依赖、包运行器 npx、事件循环(消息队列、工作队列、process.nextTick()、setImmediate())、定时器、回调、Promise、Async1. npm 全局或本地的软件包2. npm 依赖与开发依赖3. Node.js原创 2021-08-28 20:35:27 · 200 阅读 · 1 评论 -
Node.js 官网入门教程(二) npm(安装、包版本、卸载、npx)、package.json(scripts、devDependencies)package-lock.json(语义版本规则符号
Node.js 官网入门教程(二) npm(包管理、安装、包版本、卸载、npx)、package.json(scripts、devDependencies)、package-lock.json(语义版本规则符号)文章目录Node.js 官网入门教程(二) npm(包管理、安装、包版本、卸载、npx)、package.json(scripts、devDependencies)、package-lock.json(语义版本规则符号)1. npm 包管理器简介npm 简介下载安装所有依赖安装单个软件包更新软件包原创 2021-08-27 22:25:34 · 968 阅读 · 3 评论 -
Node.js 官网入门教程(一) CommonJS 模块规范、Node.js REPL、console、CLI、exports
Node.js 官网入门教程(一) CommonJS 模块规范、Node.js REPL、console、CLI、exports文章目录Node.js 官网入门教程(一) CommonJS 模块规范、Node.js REPL、console、CLI、exports1. 简介大量的库Node.js 应用程序的示例Node.js 框架和工具2. Node.js 与浏览器的区别3. 从命令行运行 Node.js 脚本4. 如何从 Node.js 程序退出退出码[#](http://nodejs.cn/api/p原创 2021-08-27 20:00:27 · 745 阅读 · 1 评论