用打王者荣耀的方式学习 webpack 没有不会的
英雄介绍
崴博.派克诞生于遥远西方的勇士之地,拥有着高超的机械技艺,善于运用各种工具来实现一些看似不可能完成的事。游历王者大陆时机缘巧合遇到了年轻的墨子,与之成为好友。后协助大宗师墨子建造了大陆第一雄城,被后人称为上古文明终结后最伟大的奇迹——长安!长安以“方舟”为驱动核心中枢,配合层出不断的机关,守护着华丽的大明宫。派克为人低调,不喜出现在大众视野,他是需求人性启迪的理想主义者,信奉着唯有光荣进化才能实现人类的全部潜能。
姓名:崴博.派克(webpack)
热度排名:T0
胜率:98%
登场率:80%(中大型项目90%)
Ban率:10%
操作难度:★★★★★
技能:
被动:(自成长型魔械技术)
cd:0秒
派克开场就会携带者他的专属装备【loader】,能够提供给他属性,并且能在商店里升级为进阶物品【plugin】,从而增强他的技能。
虹吸能量(entry 入口)
派克指定初始装备开始进化的准备,期间享受韧性加成20%,升级后可指定多个装备进化。
(entry用于指定入口文件,可配置一个或多个。)
基础使用:
module.exports = { entry: './path/to/my/entry/file.js'} // 默认可配置一个路径字符串;
字符串:默认普通路径字符串./src
。进阶使用:
1 const config = {
2 entry: './src/a.js'
3 };
- 数组: 传入一个路径数组将创建多个主入口,适用于将多个依赖文件导入一个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'}
};
魔影迷踪:(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'}
}
吸星大法(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';
光荣进化(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;
双重人格(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
};
智者光辉(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';
百宝箱(module 模块)
派克拥有可以储存任何物质的空间物,可以分类储存装备。激活后装备栏增加3,自身移速减20%
(通过配置module处理项目中的不同类型的模块。) rules匹配规则数组(最常用) 创建模块时,匹配请求的规则数组。通过规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
const config = {module: {rules: [{ test: /\.css$/, use: 'css-loader' }]}
};
推荐出装
文件处理
raw-loader
加载文件原始内容(utf-8)val-loader
将代码作为模块执行,并将 exports 转为 JS 代码url-loader
像 file loader 一样工作,但如果文件小于限制,可以返回 data URLfile-loader
将文件发送到输出文件夹,并返回(相对)URL
JSON
json-loader
加载 JSON 文件(默认包含)json5-loader
加载和转译 JSON 5 文件cson-loader
加载和转译 CSON 文件
转换编译(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
模板(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 时非常有用。
样式
style-loader
将模块的导出作为样式添加到 DOM 中css-loader
解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码less-loader
加载和转译 LESS 文件sass-loader
加载和转译 SASS/SCSS 文件postcss-loader
使用 PostCSS 加载和转译 CSS/SSS 文件stylus-loader
加载和转译 Stylus 文件
清理和测试(Linting && Testing)
mocha-loader
使用 mocha 测试(浏览器/NodeJS)eslint-loader
PreLoader,使用 ESLint 清理代码jshint-loader
PreLoader,使用 JSHint 清理代码jscs-loader
PreLoader,使用 JSCS 检查代码样式coverjs-loader
PreLoader,使用 CoverJS 确定测试覆盖率
框架(Frameworks)
vue-loader
加载和转译 Vue 组件polymer-loader
使用选择预处理器(preprocessor)处理,并且 require() 类似一等模块(first-class)的 Web 组件angular2-template-loader
加载和转译 Angular 组件
常用插件
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页面ParallelUglifyPlugi
n:加速压缩
本期英雄介绍完毕,祝大家早日国服王者,我们下期见。
再小程序中页能查看哟
用打王者荣耀的方式学习 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和王者荣耀故事讲解)
故事情景 首先介绍下故事的三位同学,阿顾.蛋蛋和洋洋,蛋蛋,洋洋喜欢玩游戏,但是又生怕班主任回来了被抓到,所以他们就找到了阿顾同学帮他们把风,但是阿顾同学不是谁都通知的,只有到阿顾那里登记的,阿顾同学 ...
最新文章
- linux如何编译tex,Linux下优秀的文本编辑器(Markdown、LaTeX、MathJax)
- Java设计模式之七大结构型模式
- centos下cmake安装
- 深入dos编程_编程入门先要学什么?打怪升级走起来!
- 记Hadoop HA高可用性分布式集群搭建过程
- Linux程序安装创建桌面图标
- php yml,YAML、YML在线编辑器(格式化校验)
- win7自带防火墙怎么关闭
- 左手云通讯,右手AI,容联为何能成为云联络中心“风向标”?
- 中国剩余定理证明及代码实现
- 服务器摆放需要预留U位么_服务器机柜的尺寸你了解多少?“U”是在弱电中代表什么意思...
- 武大计算机导师蔡贤涛,程媛(武汉大学计算中心教师)_百度百科
- Simon IELTS: Reading
- 一文总结经典卷积神经网络CNN模型
- CSS3入门基础(详解)
- java object转成byte_java对象转成byte数组的三种方法
- Bootstrap 超大屏幕(Jumbotron)
- 简单归纳一下32位、64位、x86、x64的区别和联系
- 游戏美术素材尺寸规划
- MapObject 控件的使用之加入图层(作者/张松伟)