丰台公司做网站,wordpress 资讯类 模版,网站历史快照,网址缩短在线生成文章目录 webpack概念打包的场景为什么要打包在打包之外 - 翻译在打包之外 - 小动作 课程重点模块化利用立即执行函数来改变 作用域模块化的优点模块化方案的进化史AMD#xff08;成型比较早#xff0c;应用不是很广泛#xff09;COMMONJSES6 MODULE webpack 的打包机制webp… 文章目录 webpack概念打包的场景为什么要打包在打包之外 - 翻译在打包之外 - 小动作 课程重点模块化利用立即执行函数来改变 作用域模块化的优点模块化方案的进化史AMD成型比较早应用不是很广泛COMMONJSES6 MODULE webpack 的打包机制webpack 的打包过程 配置开发环境——npm 与包管理器package.json 配置参数的含义nameversionscripts npm run xx npm install 的过程npm install 命令的额外参数 -s、-d webpack 核心特性webpack 安装指定入口文件和出口文件 处理 css、图片... 等资源文件加载器-loader插件-plugin webpack 构建工程实战 demo创了两个项目用案例了解 loader 和 plugin 的作用原理为什么要用 babel让 webpack 支持解析 ES6 语法以及 jsx 文件react 模版文件让 webpack 支持解析 htmlwebpack-dev-server 跑一个本地服务热更新不刷新页面的情况下把改动同步下来 webpack 性能调优webpack 是什么阐述个人觉得很重要可以对技术发展有个新认识比较能说服自己的扩展 webpack
概念
本质上webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时它会递归地构建一个依赖关系图**(dependency graph)其中包含应用程序需要的每个模块然后将所有这些模块打包成一个或多个 bundle。 webpack 可以通过 loader 和 plugin 来扩展打包能力 例如 css-loader 来支持打包 css 文件…TerserPlugin 来做打包体积优化 打包的场景
为什么要打包
逻辑多、文件多项目的复杂度提高了
在打包之外 - 翻译
他还能解释高级特性、语言typescript / ES6 语法这些代码直接在浏览器里写可能浏览器无法识别这时 webpack 就充当了翻译官的角色
在打包之外 - 小动作
提供了一些小插件
webpack 不仅强大而且灵活可插拔设计需要的时候用不需要的时候也可以移除掉并没有绑定死
课程重点
理解前端模块化 概念不同模块化方案是如何实现的 理解 webpack 打包的核心思路 打包过程中都做了哪些步骤、做了哪些事、经历了哪些流程后续遇到 bug 好排查 理解 webpack 中的关键点 pluginloader
入门的误区规避
不要执着于 API 和 命令 API、命令版本更新很频繁很多 API 、命令可能下个版本就变更了最主要的是了解他的概念、用来做什么的
模块化
作用域
按较早的写法js 里的变量都是全局变量会出现覆盖的问题会导致变量重名、冲突的问题反复存在会影响到你的预期结果给同名变量不同的命名空间来解决这个问题
命名空间
模块化
利用立即执行函数来改变 作用域
保护对象的属性不暴露出来防止被随意篡改模块作用域
var SusanModule (function() {var name Susanvar sex 女孩return {tell: function() {console.log(我的名字是, name)console.log(我的性别是, sex)}}
})()较早期的模块实现方式挂载到了 window 全局浏览器的 window 对象是全局作用域
(function(window) {var name Susanvar sex 女孩function tell() {console.log(我的名字是, name)console.log(我的性别是, sex)}window.SusanModule { tell }
})(window)模块化的优点
作用域封装
重用性
解除耦合提升系统的可维护性降低维护成本
模块化方案的进化史
AMD成型比较早应用不是很广泛
Asynchronous Module Definition异步模块定义显式的表达出了每个模块所依赖的其他模块有哪些而且模块内部变量的定义也不再绑定在全局作用域上这更进一步地增强了模块的安全性不必担心他在其他地方被篡改
// 求和模块的定义
define(getSum, [math], function (math) {return function (a, b) {console.log(sum math.cum(a, b));}
});COMMONJS
起初是服务端的标准NODEJS 采用并实现了部分规范2009每个文件就是一个模块并且拥有它自己的一个作用域和上下文模块的依赖通过 require 函数来引入接口暴露通过 exports 导出
// 通过 require 函数来引入
const math require(./math);// 通过 exports 将其导出
exports.getSum function (a, b) {return a b;
}上述两个方案的共同特性是规定模块的依赖必须显示引入方便维护不同模块时不必去操心引入顺序的问题
ES6 MODULE
现在比较推荐的标准语法级别的原生支持
// import 导入
import math from ./math;// export 导出
export function sum(a, b) {return a b;
}Gulp、GRUNT帮助我们实现模块化构建的工具比较老的工具库了
webpack 比他们后出现更流行
webpack 的打包机制 webpack 与立即执行函数之间的关系 webpack 打包的核心逻辑
观察打包出来的结果是一个立即执行函数
打包出来文件的大致结构 (function(module) {var installedModules {};function __webpack_require__(moduleId){// SOME CODE}// 。。。return __webpack_require__(0); // entry file})([ /* modules array */])上述结构中的核心方法 function __webpack_require__(moduleId){// check if module is in cacheif(installedModules[moduleId]){return installedModules[moduleId].exports;}// create a new module (and put into cache)var module installedModules[moduleId] {i: moduleId,l: false,exports: {}};// exe the module funcmodules[moduleId].call{module.exports,module,module.exports,__webpack_require__};// flag the module as loadedmodule.l true;// return the exxports of the modulereturn module.exports;}webpack 的打包过程
从入口文件开始分析整个应用的依赖树将每个依赖模块包装起来放在一个数组里面等待调用实现模块加载的方法并把它放在模块执行的环境中确保模块间可以相互调用把执行入口文件的逻辑放在一个函数表达式中并立即执行这个函数
配置开发环境——npm 与包管理器 理解包管理器 熟悉 npm 核心特性 理解 npm 仓库 与 依赖 的概念 理解 npm 语义化版本 掌握使用 npm 自定义工程脚本的方法 推荐将 npm 的仓库源设为国内的 淘宝源 在工作中发现很多文章博客都提出不要使用 cnpm 工具如果为了下载更快推荐使用 淘宝源而不是 cnpm设置为 淘宝源 … package.json 配置参数的含义
name
仓库名名称npm install 名称、若要上传 npm就要保证唯一
version
语义化版本npm install 的时候会自动选版本
^version: 中版本和小版本 ^1.0.1-1.x.x ~version: 小版本 ~1.0.1-1.0.x version: 特定版本 1.0.1-1.0.1
scripts npm run xx
可以定义一些命令如启动服务、语法检查、webpack 打包等
dev: webpack-dev-serverbuild: eslint .... webpack
定义好的命令常见用法
npm run build/dev/serve…
npm install 的过程
寻找包版本信息文件package.json依照它来进行安装查 package.json 中的依赖并检查项目中其他的版本信息文件如果发现了新包就更新版本信息文件
删掉重装有时解决不了问题是这里面写的版本有问题而不是依赖顺带安装的
npm install 命令的额外参数 -s、-d
npm install echarts -s
安装 echarts 并写入到 package.json 的 dependences 里别人获取到项目时npm install 就能安装相同的环境依赖我们迁移代码的时候就可以不传 node_modules 文件夹npm install 自动安装npm 5.x 的版本在 npm install xx 的时候把 -s 作为了默认参数 故推荐使用 npm 5.x 以上的版本新开发环境开始写代码前也建议检查一下 npm 版本可省事一些
npm install echarts -d
安装 echarts…放到了 devdependences 里…
webpack 核心特性
使用 webpack 构建简单的工程了解 webpack 配置文件掌握 一切皆模块与loaders 的思想理解 webpack 中的关键人物关键部分 入口文件、出口文件、loaders、plugin…
webpack 安装
npm install webpack-cli -g 全局安装这样我们就可以直接在命令行里运行 webpack 命令了一般在项目根目录执行 webpack 进行打包 去项目根目录的 src 下找 index.js 作为入口文件分析依赖关系进行打包然后生成 dist 文件夹并将打包好的 main.js 放进去 webpack 会有一些默认配置如果我们需要自定义一般会在项目根目录下新建一个 webpack.config.js 文件里面写自定义配置指定入口文件、出口文件、loaders、plugins 、web 服务的端口等
指定入口文件和出口文件
// webpack.config.js
const path require(path)module.exports {entry: ./app.js,output: {path: path.join(__dirname, dist),filename: bundle.js}
}webpack-dev-server命令行命令需要安装全局 webpack-dev-server不安装也可以直接执行 ./node_modules/.bin/webpack-dev-server
可以帮我们启动一个 webpack 本地服务监听项目文件的改动当我们修改项目文件并保存的时候它可以为我们动态的实时的重新打包并刷新浏览器并不会在 dist 目录下生产文件应该是在内存中
处理 css、图片… 等资源
文件加载器-loader
有 webpack 的项目中可以在 js 文件里引入 图片、css、less、scss 等webpack 会去处理这些依赖 需要引入对应的 loader 并且没有意义
npm install css-loader style-loader --save-dev 并在 webpack 中配置 loader loader 的配置顺序和加载顺序是相反的搞错了可能会报错每个版本的 webpack 中的配置都会有一些不一样 先写 style-loader 再写css-loader 先解析 css然后再用 css-loader 把 css 片段塞进去所以 css-loader 要放后面 什么文件用什么 loader 解析根据文件类型配置 loader
插件-plugin
做资源的处理、压缩去除代码中不必要的内容注释、换行…
npm install uglifyjs-webpack-plugin -save-dev 并在 webpack 中配置 pluginuglifyjs 是用来压缩代码体积的插件
webpack 构建工程
使用 webpack 构建真实的 react 工程掌握 babel 的用法理解 babel 原理掌握高频的 laoder 和 plugin 的用法掌握生产级别的 webpack 配置方法
实战 demo创了两个项目用案例了解 loader 和 plugin 的作用原理 并没有记全 新建项目文件在根目录下 npm init 初始化一个项目npm init -y ≈ 使用 npm 默认配置项不需要一路回车设置项目名等
npm install react react-dom
npm install webpack webpack-cli -g
将 webpack 安装到全局类似环境变量
创建 src/App.jsx
…
为什么要用 babel
并不是所有的浏览器都支持 ES6 语法的必须是版本比较高一些比较新一些的浏览器才支持这个语法
如何把 ES6 的代码转换成版本较低的 JS 语法 可以使用 babel 来处理进行代码的编译把高版本的 JS 语法编译成低版本的 JS 语法安装 npm install babel/core babel/cli -g在全局新建一个 babel 项目测试 babel 转换 JS 的 ES6 语法到 ES5 语法npm install babel/preset-env 这个包可以把 高版本的 JS 语法转换成低版本的 也支持像 webpack 一样的配置文件配置可以直接写在 package.json 里也可以在项目根路径创一个 .babelrc 文件写 babel: { presets: [babel/preset-env] }babel 命令在执行的时候如果没有指定规则会优先查 .babelrc没有就去看 package.json 里的配置 babel test.js --presetsbabel/preset-env
webpack 本身只处理ES5版本及以下的JSES6语法直接放在 webpack 下打包肯定会报错的 html 在 webpack 中怎么处理
让 webpack 支持解析 ES6 语法以及 jsx 文件react 模版文件
npm install babel-loader babel 的 loader
npm install babel/preset-env babel/preset-react 语法解析规则
安装完后在 webpack 中配置使用
让 webpack 支持解析 html
npm install html-webpack-plugin -d 并在 webpack 中配置
webpack 打包
webpack-dev-server 跑一个本地服务
可以加 --config 指定配置文件–open 直接使用浏览器打开…
命令太长了每次打这么多很麻烦我们也可以在 package.json 中写 scripts 脚本命令然后用 npm run xx 来代替那些那么长的代码写个 start/dev/serve /build
热更新不刷新页面的情况下把改动同步下来
HMRwebpack 已经支持了在 webpack 配置中配置入口文件里也要写点代码
webpack 5.x 和 html-webpack-plugin 不太兼容有问题所以按视频的操作跑不起来需要指定版本
webpack 性能调优
打包结果优化 用户体验 构建过程优化 开发者打包体验 Tree-Shaking比喻摇树把没用的树叶摇下来 webpack 中的特点剔除一些无用的代码DCE没有调用过的函数直接就不引入进来
webpack --mode production 打包会自动给我们做代码压缩等操作优化打包结果当然我们也可以定制打包结果压缩插件 uglifyjs uglify-es terser…
使用 cache 缓存可以加快我们的构建速度一定时间内不会重复的去做压缩移除无用代码、debugger、console、无用代码…有时为了加快打包速度也会加上 parallel 配置开启多线程打包
webpack-bundle-analyzer 插件可以用来让我们可视化的看我们的打包结果根据可视化可以看出哪些文件的体积最大/过大然后做一个针对性的优化有没有改动的余地
npm install webpack-bundle-analyzer 并在 webpack 中做配置
加快构建速度
先分析影响构建速度的因素有哪些 解析 减少需要打包的文件比如 echarts、jquery因为没有遵循模块化的标准可能 webpack 解析起来很费时间所以我们可以配置 webpack 不去解析他们配置个 noParse …、exclude 不解析 node_modules 下的文件 或者 include 只打包指定的打包文件 增加干活的人开启多线程来打包加快效率 HappyPack 插件 / thread-loader loader可以让 webpack 支持多个线程同时打包如果简单的项目可以不用用不好可能更慢 如果要使用 thread-loader需要把它放在所有的 loader 之前放在 rules 数组中的 use 数组的第一项是哪个数组的第一项rulesusehappypack 的 wikigithub wiki中有一个列表列出了它所支持的 loader往里面加 loader 之前去看一下 提前干活使用预编译 换 loaderfast-sass-loader 比 sass-loader 快 减少工作量使用缓存时效性不是很强… 其他一堆的因素及对应的优化思路
node 和 webpack 都是单进程的所以一般优化都是在 线程的程度上
webpack 是什么
前端发展的产物模块化打包方案工程化方案
阐述个人觉得很重要可以对技术发展有个新认识比较能说服自己的
前端技术的蓬勃发展 我们想在 js 里面更方便地实现 html 社区就有了 jsx 我们觉得原生的 css 不够好用社区就给了我们 sass 和 less 针对前端模块化开发越来越强的需求社区有了 AMD、COMMONJS、ES2015等等的方案 但这些方案大多并不被浏览器直接的支持所以说往往伴随着这些新技术而生的还有另外一些让这些新技术应用于浏览器的方案 于是我们就用 babel 来转换下一代的 js转换 jsx…我们用各种各样的工具来转换 sass、less转换为 css我们发现项目越来越复杂代码体积越来越大又开始寻找各种优化、压缩、分割的方案 前端工程化的过程真的是让我们开发者大费精力人们也是纷纷在寻找前端模块化的过程中才知晓了 webpackwebpack 的流行确实是得益于野性发展的前端但它的本质是一个前端模块化打包的一个解决方案更重要的是它又是一个可以融合运用各种前端新技术的平台
扩展 学习的参考视频【2020新课程】Webpack从原理到实战完整版-深入浅出简单易学前端工程师必学经典内容 用来了解或者入门 webpack 还是不错的感觉老师讲的挺好深度要靠自己去扩展视频中的实战 demo 需要注意 webpack 版本个人尝试因版本问题未成功不过了解个原理也挺好满足了 别人写的笔记webpack学习笔记发展背景、工作机制、核心配置、性能优化 关于webpack项目中报错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’ 的解决办法 Webpack 5: The ‘compilation’ argument must be an instance of Compilation #1451 【webpack】HtmlWebpackPlugin插件报错The ‘compilation‘ argument must be an instance of Compilation webpack超详细配置, 使用教程(图文)2017-05-06 的博客有点老了不知道价值怎么样
