假如用王者荣耀的方式学习webpack
作者 | 李初五 整理 | 桔子酱
英
雄
介
绍
崴博·派克
崴博·派克 诞生于遥远西方的勇士之地,拥有着高超的机械技艺,善于运用各种工具来实现一些看似不可能完成的事。
游历王者大陆时机缘巧合遇到了年轻的墨子,与之成为好友。后协助大宗师墨子建造了大陆第一雄城,被后人称为上古文明终结后最伟大的奇迹——长安!长安以“方舟”为驱动核心中枢,配合层出不断的机关,守护着华丽的大明宫。
派克为人低调,不喜出现在大众视野,他是需求人性启迪的理想主义者,信奉着唯有光荣进化才能实现人类的全部潜能。
姓名:崴博.派克(webpack)
热度排名:T0
胜率:98%
登场率:80%(中大型项目90%)
Ban率:10%
操作难度:★★★★★
技
能
01 被动(自成长型魔械技术)
cd:0秒
派克开场就会携带者他的专属装备【loader】,能够提供给他属性,并且能在商店里升级为进阶物品【plugin】,从而增强他的技能。
02 虹吸能量(entry 入口)
派克指定初始装备开始进化的准备,期间享受韧性加成20%,升级后可指定多个装备进化。
entry用于指定入口文件,可配置一个或多个。
基础使用:
module.exports = { entry: './path/to/my/entry/file.js' // 默认可配置一个路径字符串}
进阶使用:
字符串:默认普通路径字符串./src
。
const config = { entry: './src/a.js'}
数组:传入一个路径数组将创建多个主入口,适用于将多个依赖文件导入一个chunk时可以这么操作。
const config = { entry: ['./src/a.js','./src/b.js','./src/c.js',]}
对象:传入一个对象指定不同入口的key值(入口名称)和value(路径),字符串写法是对象写法的简写。适用于多页面应用。
const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' }}
03 魔影迷踪(output 出口)
cd:10秒
派克在经过n(取决于当前派克进行工作的复杂度)秒的吟唱后传送至指定地点。
output用于配置打包完成文件的输出和命名,配置output的最低标准是设置一个对象包含以下两点:
filename 输出文件的文件名
path 输出目录的绝对路径
基础使用:
const path = require('path');
module.exports = { entry: './src/js/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'test.bundle.js' }}
进阶使用:
当配置了多入口文件并且想输出不同chunk时应该对filename使用占位符来保证文件名称的唯一性。
占位符:
name——使用入口名称
id——使用内部chunk id
hash——使用每次构建过程中的唯一hash
chunkhash——使用基于每个chunk内容的hash
query——使用文件名?后面的字符串
{ entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' }}
04 吸星大法(loader)
cd:8秒
派克可以同化其他英雄的技能,将其转换为自身可用的能量。成功吸取基础属性+200%。
webpack本身只能处理js文件。loader可以将其它文件类型转换为webpack能够处理的模块,并对其进行打包或其它操作。它与modules模块配合使用,通过配置module.rules实现。loader相当于其他工具中的task(任务)。
loader的核心有两个属性:
test:匹配需要通过loader进行转换的文件
use:指定通过哪个loader进行转换
基础配置:
const path = require('path');
const config = { output: { filename: 'test.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }};
module.exports = config;
进阶配置:
rules允许你在处理一个文件时配置多个loader,只需要给use传入一个数组包含不同loader对象
module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }
骚操作 :可以在import语句使用!将资源中的loader分开,这样可以不配置webpack从而使用一个内联方式进行loader处理,但不推荐这种方式,因为它很难维护。
import Styles from 'style-loader!css-loader?modules!./styles.css';
05 光荣进化(plugins 插件)
cd:35秒
派克进化loader,通过plugin对5000码范围内的己方英雄进行增幅、强化,并进入霸体状态持续10秒。
不同于loader用来解析非js的文件类型,plugin可以用来处理更复杂的任务,包括打包、优化、压缩,最小到重定义环境变量。它是非常强大的,除了插件市场提供的成熟插件,还可以自己进行编写。plugin为loader带来了更多的特性,它存在的目的在于解决loader无法实现的其他事情。
使用插件只需要 require()
它,然后再添加到plugin模块中,通常情况下多数插件是可自定义的,所以想在一个配置文件中使用不同配置功能的插件,必须通过new创建一个新的实例。
基础配置:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 用于访问内置插件
const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]};
module.exports = config;
06 双重人格(mode 模式)
cd:1.5秒
派克切换形态,工作狂模式:移速增加50%,艺术家模式:减速30%同时增加自身韧性50%,免疫控制。
通过 mode
配置开发环境(development)和生产环境(production),可以启用相应模式下webpack的内置优化。
development:启用 NamedChunksPlugin
和 NamedModulesPlugin
插件
production:启用 FlagDependencyUsagePlugin
, FlagIncludedChunksPlugin
, ModuleConcatenationPlugin , NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin
和 UglifyJsPlugin
插件。
配置:
module.exports = { mode: 'production' // 或development}
07 智者光辉(reslove 模块解析)
cd:60秒
派克指定位置进入快速寻路模式,并自动分析最近路线,且无视地形障碍。
通过配置resolve来解析文件路径,reslove中可以配置使用专属插件。
目前支持解析三种文件路径:绝对路径、相对路径、模块路径
配置alias别名(最常用)
创建 import 或 require 的别名可以使模块引入变简单。例:
alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/')}
未配置alias:
import Utility from '../../utilities/utility';
已配置alias:
import Utility from 'Utilities/utility';
08 百宝箱(module 模块)
派克拥有可以储存任何物质的空间物,可以分类储存装备。激活后装备栏增加3,自身移速减20%
通过配置module处理项目中的不同类型的模块。
rules匹配规则数组(最常用)创建模块时,匹配请求的规则数组。通过规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
const config = { module: { rules: [ { test: /\.css$/, use: 'css-loader' } ] }}
推
荐
出
装
01 文件处理
raw-loader 加载文件原始内容(utf-8)
val-loader
将代码作为模块执行,并将 exports 转为 JS 代码url-loader
像 file loader 一样工作,但如果文件小于限制,可以返回 data URLfile-loader 将文件发送到输出文件夹,并返回(相对)URL
02 JSON
json-loader
加载 JSON 文件(默认包含)json5-loader
加载和转译 JSON 5 文件cson-loader
加载和转译 CSON 文件
03 转换编译(Transpiling)
script-loader
在全局上下文中执行一次 JavaScript 文件(如在 script 标签),不需要解析babel-loader
加载 ES2015+ 代码,然后使用 Babel 转译为 ES5buble-loader
使用 Bublé 加载 ES2015+ 代码,并且将代码转译为 ES5traceur-loader
加载 ES2015+ 代码,然后使用 Traceur 转译为 ES5ts-loader
或 awesome-typescript-loader 像 JavaScript 一样加载 TypeScript 2.0+coffee-loader
像 JavaScript 一样加载 CoffeeScript
04 模板(Templating)
html-loader
导出 HTML 为字符串,需要引用静态资源pug-loader
加载 Pug 模板并返回一个函数jade-loader 加载 Jade 模板并返回一个函数
markdown-loader
将 Markdown 转译为 HTMLreact-markdown-loader
使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件posthtml-loader
使用 PostHTML 加载并转换 HTML 文件handlebars-loader
将 Handlebars 转移为 HTMLmarkup-inline-loader
将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体,或将 CSS 动画应用于 SVG 时非常有用。
05 样式
style-loader
将模块的导出作为样式添加到 DOM 中css-loader
解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码less-loader
加载和转译 LESS 文件sass-loader
加载和转译 SASS/SCSS 文件postcss-loader
使用 PostCSS 加载和转译 CSS/SSS 文件stylus-loader
加载和转译 Stylus 文件
06 清理和测试(Linting && Testing)
mocha-loader
使用 mocha 测试(浏览器/NodeJS)eslint-loader
PreLoader,使用 ESLint 清理代码jshint-loader
PreLoader,使用 JSHint 清理代码jscs-loader
PreLoader,使用 JSCS 检查代码样式coverjs-loader
PreLoader,使用 CoverJS 确定测试覆盖率
07 框架(Frameworks)
vue-loader
加载和转译 Vue 组件polymer-loader
使用选择预处理器(preprocessor)处理,并且 require() 类似一等模块(first-class)的 Web 组件angular2-template-loader
加载和转译 Angular 组件
08 常见插件
ProgressPlugin
(webpack自带):用于统计打包进度IgnorePlugin
(webpack自带):忽略本地的一些模块DllPlugin
(webpack自带):预打包文件DllReferencePlugin
(webpack自带):项目打包引用预打包生成的文件AssetsWebpackPlugin
:为打包生成的js等生成路径引用指引HappyPack
:运用多核加速打包ExtractTextPlugin
:将打包中的css单独抽离出来EnvironmentPlugin
(webpack自带):在webpack层面定义项目中可以使用的全局变量DefinePlugin
(webpack自带):在webpack层面定义项目中可以使用的全局变量 与EnvironmentPlugin的形式不同而已CleanWebpackPlugin
:清理指定目录的文件CopyWebpackPlugin
:将指定目录的文件赋值到指定目录下HtmlWebpackPlugin
:webpack打包后自动生成html页面ParallelUglifyPlugin:加速压缩
本期英雄介绍完毕,祝大家早日国服王者,我们下期见。
作 · 者 · 简 · 介
李初五
「松果出行」高级前端开发工程师
腾讯云+社区优秀作者
拥有丰富的前端开发经验,并在小程序领域死磕,始终战斗在前端基建的第一线
文艺闷骚青年一枚
技 · 术 · 交 · 流
小编最近新建了一个【前端技术及面试交流群】
长按下方二维码,后台回复“进群”
邀请你进群一起学习分享!
喜欢本文点个“在看”哟!
假如用王者荣耀的方式学习webpack相关推荐
- 用打王者荣耀的方式学习 webpack 没有不会的
英雄介绍 崴博.派克诞生于遥远西方的勇士之地,拥有着高超的机械技艺,善于运用各种工具来实现一些看似不可能完成的事.游历王者大陆时机缘巧合遇到了年轻的墨子,与之成为好友.后协助大宗师墨子建造了大陆第一雄 ...
- 制作《王者荣耀》需要学习哪些技术?
<王者荣耀>属于典型的Moba类游戏,和<英雄联盟>属于同一种游戏类型,那么<王者荣耀>这种游戏是如何制作的?又需要学习哪些技术点呢?今天我们一起来分析一下. 这里 ...
- 服务器匹配原理,王者荣耀实现原理学习笔记
原作来自腾讯游戏学院 以下是原文部分节选 一.服务器架构 "房间模式" 房间类玩法和MMORPG有很大不同: 1.广播单元的不确定性 2.广播数量很小 3.需要匹配一台房间服务器让 ...
- 【思维论01】如何让自己像打王者荣耀一样发了疯、石乐志的学习?
这是我思维导论的第1期,灵感来自另一位博主.视频做完后会接着更新算法系列专栏~ 我们玩王者荣耀,究竟是为了什么 对于非职业玩家来说,打王者荣耀,是为了什么?除去消遣时间这个普遍因素,是为了推掉对方水晶 ...
- 强化学习王者荣耀Ai的搭建
这里写自定义目录标题 开源地址 环境的搭建 adb下载 scrcpy和minitouch 其它要注意的地方 开源地址 源码网址:https://github.com/FengQuanLi/WZCQ ( ...
- 《王者荣耀》是如何将心理学研究应用到极致的?
本文来自知乎网友神作关于知乎话题"在游戏设计者眼中,哪款游戏将心理学研究应用到了极致?"的回答,游资网授权发布. 开篇语: 感谢@木棉959圆桌派邀约.哪款游戏将心理学研究应用到了 ...
- 类似王者荣耀帧同步游戏的相关技术
游戏开发 王者荣耀属于典型的Moba类游戏,和英雄联盟属于同一种游戏类型,那么王者荣耀这种游戏是如何制作的?又需要学习哪些技术点呢?今天我们一起来分析一下. 这里有个教学视频可以学习一下, 或者加入U ...
- Python环境下用中文做了个《王者荣耀》AI脚本,附视频
<王者荣耀>AI最早的巅峰应该是在2018年 "AI(人工智能)"VS"人类明星战队",视频给你们留着了,先留着等会看. 梦泪被AI击杀6次,KPL ...
- Java观察者模式事件委托(通过dota和王者荣耀故事讲解)
故事情景 首先介绍下故事的三位同学,阿顾.蛋蛋和洋洋,蛋蛋,洋洋喜欢玩游戏,但是又生怕班主任回来了被抓到,所以他们就找到了阿顾同学帮他们把风,但是阿顾同学不是谁都通知的,只有到阿顾那里登记的,阿顾同学 ...
最新文章
- android 事件传递机制
- HandlerInterceptor和HandlerExceptionResolver 如何在DispatcherServlet中生效?
- cpu风扇转速慢_cpu风扇简介有哪些?cpu风扇选购技巧介绍_
- 第九篇:Spring Boot整合Spring Data JPA_入门试炼04
- 服务器如何修复dll,Windows10系统修复KernelBase.dll错误的解决方法
- 阿里云科学家入选计算机顶会 HPCA 名人堂,他是什么来头?
- python练习题及答案-python装饰器练习题及答案
- Airflow集成在线编写创建dag的插件
- Oracle 动态视图3 V$SESSION
- java字体倾斜_Java没有合成斜体字体
- 基于STM32cubemx的STM32F107vct6的代码生成,实验四串口与DMA
- 一些网站后台模板源码分析
- 西门子PID程序,西门子PLC 1200和G120西门子 变频器Modbud RTU通讯,带西门子触摸屏,带变频器参数/Modbus通讯报西门子PID程序
- FCN全卷积神经网络
- 使用计算机需要准备硬件和什么,2017年计算机硬件知识参考试题
- fiddler手机抓包配置代理后没有网络(手机不能上网)
- 微软邮箱smtp服务器,微软宣布将为网页版的Outlook邮箱服务增加SMTP邮件代发(别名)功能...
- 广州数据中心机房机柜安装施工
- php队列教程,PHP之消息队列
- html计算书怎么导出,3D3S怎么出计算书 计算结果输出方法