搜索

[25873] 2016-12-24_Webpack2入门

文档创建者：s7ckTeam
浏览次数：2
最后更新：2025-01-19
2016-12-24_Webpack2入门 - -   D r e w   P o w e r s 0 1 % 1 4 % 2 7 % 2 8 % 3 0 % 3 2 % 3 7 % 4 3 % 4 5 % 4 7 % 5 3 % 6 3 % 6 6 % 7 5 % 7 8 % 8 4 % 9 0 % 9 5 % W e b p a c k   2   入 门 原 创   译 者 ： O n e N e w L i f e   L i n u x 中 国   2 0 1 6 - 1 2 - 2 4 简 单 来 说 ， W e b p a c k   是 一 个   J a v a S c r i p t   模 块 打 包 器 。 然 而 ， 自 从 它 发 布 以 来 ， 它 发 展 成 为 了 你 所 有 的 前 端 代 码 的 管 理 工 具 （ 或 许 是 有 意 的 ， 或 许 是 社 区 的 意 愿 ） 。 本 文 导 航 - W e b p a c k   是 什 么 - 第 一 步 - 使 用 多 个 文 件 - 打 包 多 个 文 件 - 输 出 多 个 文 件 - 高 级 打 包 自 动 化 - 开 发 - 全 局 访 问 方 法 - 加 载 器 - B a b e l   和   E S 6 - C S S   和   S t y l e   加 载 器 - C S S   和   N o d e   模 块 - C S S   模 块 - S a s s - C S S   独 立 打 包 - H T M L - 从 模 块 的 角 度 思 考 - 延 伸 阅 读 编 译 自 ：   h t t p s : / / b l o g . m a d e w i t h e n v y . c o m / g e t t i n g - s t a r t e d - w i t h - w e b p a c k - 2 - e d 2 b 8 6 c 6 8 7 8 3 # . o o z f p p p a o   作 者 ：   D r e w   P o w e r s 译 者 ：   O n e N e w L i f e W e b p a c k   2   一 旦 文 档 完 成 [ 1 ] ， 就 将 结 束   B e t a   测 试 期 。 不 过 这 并 不 意 味 着 你 现 在 不 能 开 始 使 用 第   2   版 ， 前 提 是 你 知 道 怎 么 配 置 它 。 （ L C T T   译 注 ： W e b p a c k   2 . 1   已 经 发 布 。 ） W e b p a c k   是 什 么 是 什 么 简 单 来 说 ， W e b p a c k   是 一 个   J a v a S c r i p t   模 块 打 包 器 。 然 而 ， 自 从 它 发 布 以 来 ， 它 发 展 成 为 了 你 所 有 的 前 端 代 码 的 管 理 工 具 （ 或 许 是 有 意 的 ， 或 许 是 社 区 的 意 愿 ） 。
老 式 的 任 务 运 行 器 的 方 式 ： 你 的 标 记 、 样 式 和   J a v a S c r i p t   是 分 离 的 。 你 必 须 分 别 管 理 它 们 每 一 个 ， 并 且 你 需 要 确 保 每 一 样 都 达 到 产 品 级 t a s k   r u n n e r 任 务 运 行 器 ， 例 如   G u l p ， 可 以 处 理 许 多 不 同 的 p r e p r o c e s s e r 预 处 理 器 和 t r a n s p i l e r 转 换 器 ， 但 是 在 所 有 的 情 景 下 ， 它 都 需 要 一 个 输 入 源 并 将 其 压 缩 到 一 个 编 译 好 的 输 出 文 件 中 。 然 而 ， 它 是 在 每 个 部 分 的 基 础 上 这 样 做 的 ， 而 没 有 考 虑 到 整 个 系 统 。 这 就 造 成 了 开 发 者 的 负 担 ： 找 到 任 务 运 行 器 所 不 能 处 理 的 地 方 ， 并 找 到 适 当 的 方 式 将 所 有 这 些 模 块 在 生 产 环 境 中 联 合 在 一 起 。 W e b p a c k   试 图 通 过 提 出 一 个 大 胆 的 想 法 来 减 轻 开 发 者 的 负 担 ： 如 果 有 一 部 分 开 发 过 程 可 以 自 动 处 理 依 赖 关 系 会 怎 样 ？ 如 果 我 们 可 以 简 单 地 写 代 码 ， 让 构 建 过 程 最 终 只 根 据 需 求 管 理 自 己 会 怎 样 ？ W e b p a c k   的 方 式 ： 如 果   W e b p a c k   了 解 依 赖 关 系 ， 它 会 仅 捆 绑 我 们 在 生 产 环 境 中 实 际 需 要 的 部 分
如 果 你 过 去 几 年 一 直 参 与   w e b   社 区 ， 你 已 经 知 道 解 决 问 题 的 首 选 方 法 ： 使 用   J a v a S c r i p t   来 构 建 。 而 且   W e b p a c k   尝 试 通 过 J a v a S c r i p t   传 递 依 赖 关 系 使 得 构 建 过 程 更 加 容 易 。 不 过 这 个 设 计 真 正 的 亮 点 不 是 简 化 代 码 管 理 部 分 ， 而 是 管 理 层 由   1 0 0 %   有 效 的   J a v a S c r i p t   实 现 （ 具 有   N o d e j s   特 性 ） 。 W e b p a c k   能 够 让 你 编 写 有 效 的   J a v a S c r i p t ， 更 好 更 全 面 地 了 解 系 统 。 换 句 话 来 说 ： 你 不 需 要 为   W e b p a c k   写 代 码 。 你 只 需 要 写 项 目 代 码 。 而 且   W e b p a c k   就 会 持 续 工 作 （ 当 然 需 要 一 些 配 置 ） 。 简 而 言 之 ， 如 果 你 曾 经 遇 到 过 以 下 任 何 一 种 情 况 ： 载 入 有 问 题 的 依 赖 项 意 外 引 入 一 些 你 不 需 要 在 生 产 中 用 上 的   C S S   样 式 表 和   J S   库 ， 使 项 目 膨 胀 意 外 的 两 次 载 入 （ 或 三 次 ） 库 遇 到 作 用 域 的 问 题   — —   C S S   和   J a v a S c r i p t   都 会 有 寻 找 一 个 让 你 在   J a v a S c r i p t   中 使 用   N o d e / B o w e r   模 块 的 构 建 系 统 ， 要 么 就 得 依 靠 一 个 令 人 发 狂 的 后 端 配 置 才 能 正 确 地 使 用 这 些 模 块 需 要 优 化 a s s e t 资 产 交 付 ， 但 你 担 心 会 弄 坏 一 些 东 西 等 等 … … 那 么 你 可 以 从   W e b p a c k   中 收 益 了 。 它 通 过 让   J a v a S c r i p t   轻 松 处 理 你 的 依 赖 关 系 和 加 载 顺 序 ， 而 不 是 通 过 开 发 者 的 大 脑 。 最 好 的 部 分 是 ， W e b p a c k   甚 至 可 以 纯 粹 在 服 务 器 端 运 行 ， 这 意 味 着 你 还 可 以 使 用   W e b p a c k   构 建 渐 进 增 强 式 [ 2 ] 网 站 。 第 一 步 第 一 步 我 们 将 在 本 教 程 中 使 用   Y a r n [ 3 ] （ 运 行 命 令   ）   代 替   ， 不 过 这 完 全 取 决 于 你 的 喜 好 ， 它 们 做 同 样 的 事 情 。 在 我 们 的 项 目 文 件 夹 中 ， 我 们 将 在 终 端 窗 口 中 运 行 以 下 代 码 ， 将 W e b p a c k   2   添 加 到 我 们 的 全 局 软 件 包 以 及 本 地 项 目 中 ： 我 们 接 着 会 通 过 项 目 根 目 录 的 一 个     文 件 来 声 明   w e b p a c k   的 配 置 ： 2 .   b r e w   i n s t a l l   y a r n n p m 1 .   y a r n   g l o b a l   a d d   w e b p a c k @ 2 . 1 . 0 - b e t a . 2 5   w e b p a c k - d e v - s e r v e r @ 2 . 1 . 0 - b e t a . 9 2 .   y a r n   a d d   - - d e v   w e b p a c k @ 2 . 1 . 0 - b e t a . 2 5   w e b p a c k - d e v - s e r v e r @ 2 . 1 . 0 - b e t a . 9 w e b p a c k . c o n f i g . j s 1 .   ' u s e   s t r i c t ' ;
4 .   注 意 ： 此 处     是 指 你 的 项 目 根 目 录 记 住 ， W e b p a c k   “ 知 道 ” 你 的 项 目 发 生 了 什 么 。 它 通 过 阅 读 你 的 代 码 来 实 现 （ 别 担 心 ， 它 签 署 了 保 密 协 议   : D   ） 。 W e b p a c k   基 本 上 执 行 以 下 操 作 ： 1 .   从     文 件 夹 开 始 … … 2 .   … … 它 查 找     下 的 文 件 名 … … 3 .   … … 并 读 取 其 内 容 。 每 一 个   （ E S 6 [ 4 ] ） 或   （ N o d e j s ） 的 依 赖 会 在 它 解 析 代 码 的 时 候 找 到 ， 它 会 在 最 终 构 建 的 时 候 打 包 这 些 依 赖 项 。 然 后 ， 它 会 搜 索 那 些 依 赖 项 以 及 那 些 依 赖 项 所 依 赖 的 依 赖 项 ， 直 到 它 到 达 “ 树 ” 的 最 底 端   — —   只 打 包 它 所 需 要 的 ， 没 有 其 它 东 西 。 4 .   W e b p a c k   从     文 件 夹 打 包 所 有 东 西 到     文 件 夹 ， 使 用     命 名 模 板 来 为 其 命 名 （ 其 中     被 替 换 成 来 自     的 对 象 的 键 ） 。 3 .   c o n s t   w e b p a c k   =   r e q u i r e ( ' w e b p a c k ' ) ; 5 .   m o d u l e . e x p o r t s   =   { 6 .       c o n t e x t :   _ _ d i r n a m e   +   ' / s r c ' , 7 .       e n t r y :   { 8 .           a p p :   ' . / a p p . j s ' , 9 .       } , 1 0 .       o u t p u t :   { 1 1 .           p a t h :   _ _ d i r n a m e   +   ' / d i s t ' , 1 2 .           f i l e n a m e :   ' [ n a m e ] . b u n d l e . j s ' , 1 3 .       } , 1 4 .   } ; _ _ d i r n a m e c o n t e x t e n t r y i m p o r t r e q u i r e ( ) c o n t e x t o u t p u t . p a t h o u t p u t . f i l e n a m e [ n a m e ] e n t r y
所 以 如 果 我 们 的     文 件 看 起 来 像 这 样 （ 假 设 我 们 事 先 运 行 了   ） ： 2 .   6 .   我 们 应 该 运 行 ： 注 意 ：   标 志 表 示 “ 生 产 ” 模 式 ， 这 会 压 缩 输 出 文 件 。 它 会 输 出 一 个   ， 并 将 当 前 日 期 和 时 间 打 印 到 控 制 台 。 要 注 意   W e b p a c k   会 自 动 识 别   上 面 的     指 代 的 是 什 么 （ 比 如 说 ， 虽 然 如 果 你 有 一 个     文 件 在 你 的 目 录 ， 默 认 情 况 下   W e b p a c k   会 优 先 考 虑 你 的     N o d e   模 块 ） 。 使 用 多 个 文 件 使 用 多 个 文 件 你 可 以 通 过 仅 仅 修 改     对 象 来 指 定 任 意 数 量 的 e n t r y 入 口 / o u t p u t 输 出 点 。 s r c / a p p . j s y a r n   a d d   - - d e v   m o m e n t 1 .   ' u s e   s t r i c t ' ; 3 .   i m p o r t   m o m e n t   f r o m   ' m o m e n t ' ; 4 .   v a r   r i g h t N o w   =   m o m e n t ( ) . f o r m a t ( ' M M M M   D o   Y Y Y Y ,   h : m m : s s   a ' ) ; 5 .   c o n s o l e . l o g (   r i g h t N o w   ) ; 7 .   / /   " O c t o b e r   2 3 r d   2 0 1 6 ,   9 : 3 0 : 2 4   p m " 1 .   w e b p a c k   - p p d i s t / a p p . b u n d l e . j s ' m o m e n t ' m o m e n t . j s m o m e n t e n t r y
打 包 多 个 文 件 打 包 多 个 文 件 2 .   4 .   所 有 文 件 都 会 按 照 数 组 的 顺 序 一 起 被 打 包 成 一 个     文 件 。 输 出 多 个 文 件 输 出 多 个 文 件 2 .   1 .   ' u s e   s t r i c t ' ; 3 .   c o n s t   w e b p a c k   =   r e q u i r e ( " w e b p a c k " ) ; 5 .   m o d u l e . e x p o r t s   =   { 6 .       c o n t e x t :   _ _ d i r n a m e   +   " / s r c " , 7 .       e n t r y :   { 8 .           a p p :   [ " . / h o m e . j s " ,   " . / e v e n t s . j s " ,   " . / v e n d o r . j s " ] , 9 .       } , 1 0 .       o u t p u t :   { 1 1 .           p a t h :   _ _ d i r n a m e   +   " / d i s t " , 1 2 .           f i l e n a m e :   " [ n a m e ] . b u n d l e . j s " , 1 3 .       } , 1 4 .   } ; d i s t / a p p . b u n d l e . j s 1 .   c o n s t   w e b p a c k   =   r e q u i r e ( " w e b p a c k " ) ; 3 .   m o d u l e . e x p o r t s   =   { 4 .       c o n t e x t :   _ _ d i r n a m e   +   " / s r c " , 5 .       e n t r y :   { 6 .           h o m e :   " . / h o m e . j s " , 7 .           e v e n t s :   " . / e v e n t s . j s " , 8 .           c o n t a c t :   " . / c o n t a c t . j s " , 9 .       } ,
或 者 ， 你 可 以 选 择 打 包 成 多 个   J S   文 件 以 便 于 分 割 应 用 的 某 些 模 块 。 这 将 被 打 包 成   3   个 文 件 ： ，   和   。 高 级 打 包 自 动 化 高 级 打 包 自 动 化 如 果 你 将 你 的 应 用 分 割 成 多 个     输 出 项 （ 如 果 你 的 应 用 的 一 部 分 有 大 量 你 不 需 要 预 加 载 的   J S ， 这 会 很 有 用 ） ， 你 可 能 会 重 用 这 些 文 件 的 代 码 ， 因 为 它 将 分 别 解 析 每 个 依 赖 关 系 。 幸 运 的 是 ， W e b p a c k   有 一 个 内 置 的     插 件 来 处 理 这 个 ： 3 .   1 1 .   9 .       } , 1 0 .       o u t p u t :   { 1 1 .           p a t h :   _ _ d i r n a m e   +   " / d i s t " , 1 2 .           f i l e n a m e :   " [ n a m e ] . b u n d l e . j s " , 1 3 .       } , 1 4 .   } ; d i s t / h o m e . b u n d l e . j s d i s t / e v e n t s . b u n d l e . j s d i s t / c o n t a c t . b u n d l e . j s o u t p u t C o m m o n s C h u n k 1 .   m o d u l e . e x p o r t s   =   { 2 .       / /   … 4 .       p l u g i n s :   [ 5 .           n e w   w e b p a c k . o p t i m i z e . C o m m o n s C h u n k P l u g i n ( { 6 .               n a m e :   " c o m m o n s " , 7 .               f i l e n a m e :   " c o m m o n s . b u n d l e . j s " , 8 .               m i n C h u n k s :   2 , 9 .           } ) , 1 0 .       ] , 1 2 .       / /   …
现 在 ， 在 你 的     文 件 中 ， 如 果 你 有 任 何 模 块 被 加 载   2   次 以 上 （ 通 过     设 置 ） ， 它 会 把 那 个 模 块 打 包 到     文 件 中 ， 然 后 你 可 以 将 其 缓 存 在 客 户 端 。 这 将 生 成 一 个 额 外 的 请 求 头 ， 但 是 你 防 止 了 客 户 端 多 次 下 载 同 一 个 库 。 因 此 ， 在 很 多 情 景 下 ， 这 会 大 大 提 升 速 度 。 开 发 开 发 W e b p a c k   实 际 上 有 自 己 的 开 发 服 务 器 ， 所 以 无 论 你 是 开 发 一 个 静 态 网 站 还 是 只 是 你 的 网 站 前 端 原 型 ， 它 都 是 无 可 挑 剔 的 。 要 运 行 那 个 服 务 器 ， 只 需 要 添 加 一 个     对 象 到   ： 1 3 .   } ; o u t p u t m i n C h u n k s c o m m o n . j s d e v S e r v e r w e b p a c k . c o n f i g . j s 1 .   m o d u l e . e x p o r t s   =   { 2 .       c o n t e x t :   _ _ d i r n a m e   +   " / s r c " , 3 .       e n t r y :   { 4 .           a p p :   " . / a p p . j s " , 5 .       } , 6 .       o u t p u t :   { 7 .           f i l e n a m e :   " [ n a m e ] . b u n d l e . j s " , 8 .           p a t h :   _ _ d i r n a m e   +   " / d i s t / a s s e t s " , 9 .           p u b l i c P a t h :   " / a s s e t s " ,                         / /   N e w 1 0 .       } , 1 1 .       d e v S e r v e r :   { 1 2 .           c o n t e n t B a s e :   _ _ d i r n a m e   +   " / s r c " ,     / /   N e w 1 3 .       } , 1 4 .   } ;
现 在 创 建 一 个 包 含 以 下 代 码 的     文 件 ： … … 在 你 的 终 端 中 运 行 ： 你 的 服 务 器 现 在 运 行 在   。 注 意     标 签 里 面 的     是 怎 么 匹 配 到     的   — —   你 可 以 随 意 更 改 它 的 名 称 （ 如 果 你 需 要 一 个   C D N   的 时 候 这 会 很 有 用 ） 。 W e b p a c k   会 热 加 载 所 有   J a v a S c r i p t   更 改 ， 而 不 需 要 刷 新 你 的 浏 览 器 。 但 是 ， 所 有     文 件 里 面 的 更 改 都 需 要 重 新 启 动 服 务 器 才 能 生 效 。 全 局 访 问 方 法 全 局 访 问 方 法 需 要 在 全 局 空 间 使 用 你 的 函 数 ？ 在     里 面 简 单 地 设 置   ： s r c / i n d e x . h t m l 1 .   < s c r i p t   s r c = " / a s s e t s / a p p . b u n d l e . j s " > < / s c r i p t > 1 .   w e b p a c k - d e v - s e r v e r l o c a l h o s t : 8 0 8 0 s c r i p t / a s s e t s o u t p u t . p u b l i c P a t h w e b p a c k . c o n f i g . j s w e b p a c k . c o n f i g . j s o u t p u t . l i b r a r y 1 .   m o d u l e . e x p o r t s   =   { 2 .       o u t p u t :   { 3 .           l i b r a r y :   ' m y C l a s s N a m e ' , 4 .       } 5 .   } ;
… … 这 会 将 你 打 包 好 的 文 件 附 加 到 一 个     实 例 。 因 此 ， 使 用 该 命 名 空 间 ， 你 可 以 调 用 入 口 文 件 的 可 用 方 法 （ 可 以 在 该 文 档 [ 5 ] 中 阅 读 有 关 此 设 置 的 更 多 信 息 ） 。 加 载 器 加 载 器 到 目 前 为 止 ， 我 们 所 做 的 一 切 只 涉 及   J a v a S c r i p t 。 从 一 开 始 就 使 用   J a v a S c r i p t   是 重 要 的 ， 因 为 它 是   W e b p a c k   唯 一 支 持 的 语 言 。 事 实 上 我 们 可 以 处 理 几 乎 所 有 文 件 类 型 ， 只 要 我 们 将 其 转 换 成   J a v a S c r i p t 。 我 们 用 l o a d e r 加 载 器 来 实 现 这 个 功 能 。 加 载 器 可 以 是   S a s s   这 样 的 预 处 理 器 ， 或 者 是   B a b e l   这 样 的 转 译 器 。 在   N P M   上 ， 它 们 通 常 被 命 名 为   ， 例 如     和   。 B a b e l   和 和   E S 6 如 果 我 们 想 在 项 目 中 通 过   B a b e l [ 6 ]   来 使 用   E S 6 ， 我 们 首 先 需 要 在 本 地 安 装 合 适 的 加 载 器 ： 然 后 将 它 添 加 到   ， 让   W e b p a c k   知 道 在 哪 里 使 用 它 。 3 .   w i n d o w . m y C l a s s N a m e * - l o a d e r s a s s - l o a d e r b a b e l - l o a d e r 1 .   y a r n   a d d   - - d e v   b a b e l - l o a d e r   b a b e l - c o r e   b a b e l - p r e s e t - e s 2 0 1 5 w e b p a c k . c o n f i g . j s 1 .   m o d u l e . e x p o r t s   =   { 2 .       / /   … 4 .       m o d u l e :   { 5 .           r u l e s :   [ 6 .               { 7 .                   t e s t :   / . j s $ / , 8 .                   u s e :   [ { 9 .                       l o a d e r :   " b a b e l - l o a d e r " ,                     o p t i o n s :   {   p r e s e t s :   [ " e s 2 0 1 5 " ]   }
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理