当前播放: 26 | 多页面应用打包通用方案
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:webpack与构建发展简史 (9讲)
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
免费
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
免费
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
第二章:webpack基础用法 (12讲)
10 | webpack核心概念之entry
免费
11 | webpack核心概念之output
免费
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React JSX
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理分析
20 | 文件指纹策略:chunkhash、contenthash和hash
21 | HTML 、CSS和JavaScript代码压缩
第三章:webpack进阶用法 (16讲)
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer自动补齐CSS3前缀
24 | 移动端CSS px自动转换成rem
25 | 静态资源内联
26 | 多页面应用打包通用方案
27 | 使用sourcemap
28 | 提取页面公共资源
29 | Tree Shaking的使用和原理分析
30 | Scope Hoisting使用和原理分析
31 | 代码分割和动态import
32 | 在webpack中使用ESLint
33 | webpack打包组件和基础库
34 | webpack实现SSR打包(上)
35 | webpack实现SSR打包(下)
36 | 优化构建时命令行的显示日志
37 | 构建异常和中断处理
第四章:编写可维护的webpack构建配置 (9讲)
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
第五章:webpack构建速度和体积优化策略 (12讲)
47 | 初级分析:使用webpack内置的stats
48 | 速度分析:使用speed-measure-webpack-plugin
49 | 体积分析:使用webpack-bundle-analyzer
50 | 使用高版本的webpack和Node.js
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模块
54 | 充分利用缓存提升二次构建速度
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无用的JavaScript和CSS
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
第六章:通过源代码掌握webpack打包原理 (9讲)
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
第七章:编写loader和插件 (7讲)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
第八章:React全家桶和webpack开发商城项目 (10讲)
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈web商城的性能优化策略
83 | 功能开发总结
84 | 结束语
26 | 多页面应用打包通用方案

26 | 多页面应用打包通用方案

程柳锋
腾讯高级工程师,IVWEB团队社区和工程化负责人
84讲 84课时,约900分钟5460
单独订阅¥99
2人成团¥79
7
本节摘要
登录 后留言

精选留言(28)

  • 袋袋
    entryFIles本来不就是一个数组吗,为什么还要用Object.key来处理,还有map不是需要返回值吗,为什么不用forEach,循环里参数第一个值不就是当前项吗,为什么要用index来获取,还有pageName中的index,input那几个值怎么来的。

    作者回复: 1. 完全也推荐用 map 的写法,因为我们这个地方是一步到位讲解了通用的打包方案,如果有个中间演变方案,就比较容易理解为什么用 Object.keys 写法。比如:

    entry: {
      index: './src/index/index.js',
      search: './src/search/index'
    }
    这个时候动态设置 html-webpack-plugin的数量是不是就需要先获取 keys? 这个情况的 entry 是一个 ojbect 就需要 object.keys 去获取了。由于此处是直接将最通用的方案,完全可以用 map 的写法。

    2, 还有pageName中的匹配规则就是获取entry路径中的 ./src/ 开头和 /index.js 结尾中间的内容。也即页面的名字

    2019-06-10
    5
    17
  • SCRD
    特别想问一下,webpack和后端项目多页面怎么结合,尤其是更新相应文件缓存,还是说一定要和gulp结合

    作者回复: 更新文件缓存是生成的文件指纹去控制的,文件变化后,那么文件指纹会发生相应变化,就不会出现缓存还在的问题了。顺便说下通常的文件缓存策略:

    html: header 头的 cache-control 会设置成 no-cache。也就是 html 文件不会走缓存

    css/js/img 等静态资源:header头的 cache-control 设置成强缓存,缓存时间通常是1年的样子。通过文件指纹控制缓存是否失效,文件指纹一变,请求就不会走旧文件了。

    2019-06-13
    5
  • Valar Morghulis
    1、map确实比foreach快,自己用console.time花2分钟做实验就知道了;
    2、foreach会改变原数组,在这里我们不想对原数组进行任何修改,只是想拿数据来用;
    3、map会返回一个新的数组,如果像有额外操作,可以继续在后面链式的使用filter、reduce等等,很方便。有返回值不是说一定要把这个返回值拿来用,不要读死书;
    4、entryfile可以直接用map,这里遍历keys是考虑到如果entryfile如果是一个对象的情况,其实按照本章案例,用map、foreach、for遍历都行,看你编码习惯,作者在用的时候顺便说明一下就好了,导致评论里有很多人不理解。
    2019-11-12
    3
  • 灯火阑珊
    这里entryFiles直接用map,取第一个参数实测效果一样,用Objec.keys是有什么特别原因么,麻烦老师解释一下。

    作者回复: 哈哈,这里主要是如果 entry是 hard code的写法的话,那么entry是一个 object,例如:
    entry: {
      index: './src/index/index.js',
      search: './src/search/index.js'
    }

    那么,我们获取动态设置 html-webpack-plugin 是不是需要通过 Object.keys 去获取key,主要是基于这点去考虑的哈。

    由于我们这里直接演示了最通用的方案,一步到位,其实完全用 map 匹配没问题的,直接用 map 匹配即可。

    2019-06-12
    3
  • zjlyyq
    const match = entryFile.match(/src\/(.*)\/index\.js/)
    为什么这句我得这么写才能匹配出正确的pageName

    作者回复: 此处的匹配规则是 src目录的子目录,并且这个子目录含有 index.js 入口文件。

    我们把匹配的内容在src 和 index.js 之间,因此需要用 (.*)包裹起来获取

    2019-06-14
    2
  • 前端路上的小学生
    我的动态打包是利用fs模块的
    2019-08-09
    1
    1
  • 翰弟
    ERROR in Error: Child compilation failed:
      Entry module not found: Error: Can't resolve '/Users/xupan/openSource/geektime-webpack-course/src/chapter03/my-project/src/chapter03/my-project/src/index/index.html' in '/Users/xupan/openSource /geektime-webpack-course/src/chapter03/my-project':
      Error: Can't resolve '/Users/xupan/openSource/geektime-webpack-course/src/chapter03/my-project/src/chapter03/my-project/src/index/index.html' in '/Users/xupan/openSource/geektime-webpack-course /src/chapter03/my-project'
      
      - compiler.js:79 childCompiler.runAsChild
        [my-project]/[html-webpack-plugin]/lib/compiler.js:79:16
      
      - Compiler.js:306 compile
        [my-project]/[webpack]/lib/Compiler.js:306:11
      
      - Compiler.js:631 hooks.afterCompile.callAsync.err
        [my-project]/[webpack]/lib/Compiler.js:631:15
    2019-06-19
    1
    1
  • Geek_5541c1
    老师您好!生成的每个html页面都会inject 所有的js,例如视频中的 index.html里面会嵌入 index_xxx.js 和 search_xxx.js ,怎么做到只嵌入当前页面相关的js

    作者回复: html-webpack-plugin 里面有哥 chunks 字段,可以通过它指定需要嵌入进去的 chunks 的,比如(注意看chunks):

    htmlWebpackPlugins.push(
      new HtmlWebpackPlugin({
    inlineSource: '.css$',
    template: path.join(__dirname, `src/${pageName}/index.html`),
    filename: `${pageName}.html`,
    chunks: [pageName],
    inject: true,
    minify: {
    html5: true,
    collapseWhitespace: true,
    preserveLineBreaks: false,
    minifyCSS: true,
    minifyJS: true,
    removeComments: false
    }
      })
    );
    });

    2019-06-17
    1
  • 老师,我想问下,用react的脚手架创建的环境中怎么实现动态多页面打包呢?
    2019-12-17
  • Geek_3b0148
    老师好,我用webpack进行多页面打包,超过6个都打包不了,卡住不动,请问老师应该怎么优化
    2019-12-13
  • Geek_185c7d
    按照老师的写的正则报错如下:
    SyntaxError: Invalid regular expression: /src\(.*)\/index\.js/: Unmatched ')'

    在第一个转义符号后面加上斜杠(/),才可以。如:match(/src\/(.*)\/index\.js/)

    不知道有遇到同样的吗
    2019-12-13
  • 徐จุ๊บ
    老师 entryFiles有可能会是一个对象吗?
    2019-12-06
  • QG
    src/*/index.js,这里说*号是匹配src下所有的文件,那就是src/a/index.js, src/a/b/index.js都可以匹配到咯,但如果我不想匹配b目录下的怎么办
    2019-11-17
  • 海波的搏
    ejs不是〈%%〉这种写法吗,${}没看过这种写法,ejs也没介绍,请问这在哪有说明
    2019-11-11
    1
  • 微想未来
    为啥我这边写entry[pageName]= `./src/${pageName}/index.js`;才能成功,按老师的写法entry[pageName]= entryFile;就报错说 :
    ERROR in Entry module not found: Error: Can't resolve 'index' in 'D:\work\webwork\webpack\mpa-2-demo'

    ERROR in Entry module not found: Error: Can't resolve 'search' in 'D:\work\webwork\webpack\mpa-2-demo'
    绝对路径为啥就报错,好困惑zzZ
    2019-10-16
  • 微想未来
    entryFiles值为[],为啥。。。
    2019-10-11
    1
  • 老师好,我之前一个多页面应用中是用的内置的`fs`模块解析的文件路径,最终实现方式跟本节课中的类似,但是没有用`glob`模块,请问用`glob`模块除了简洁一点之外还有什么好处吗?我之前的代码如下:
    ```
    //获取html插件
    const getAppIndex = (files) => {
      return files.reduce((data, file) => {
        const [key, template, appJs] = file;
        if( fs.existsSync( appJs ) ){
          data.appIndexJs[key] = [
            'babel-polyfill',
            appJs
          ];
          data.appHtml.push(
            new HtmlWebpackPlugin({
              template: template,
              filename: `${key}.html`,
              chunks: [key]
            })
          )
        }
        return data;
      }, {
        appIndexJs: { },
        appHtml: [ ]
      })
    }

    const { appIndexJs, appHtml } = getAppIndex(paths.appIndex);

    ```

    作者回复: glob模块主要就是文件的通配匹配能力比较强,你自己去实现一个类似的获取某个目录下的所有入口文件也是可以的。

    2019-09-07
  • 晓东
    老师,这里用 map是效率比foreach高么
    2019-08-09
  • 刘小宅
    老师我这里有个疑惑, 就是如果我要打包一个多页面应用, 但是我的项目中只有一个html, 但是src下有多个文件夹,每个文件夹代表着一个活动页面,如何让我的每一个活动页面下的js文件共用一个html,并且打包成多页面的应用,这个问题困惑了许久,希望老师能解惑
    2019-08-08
  • dudustyle
    老师,我引入公共meta.html在开发模式下,浏览下查看时,都生成在了body内,老师这是什么原因呢?meta内容也未成功加载
    <!DOCTYPE html><html lang="en"><head>${ require('raw-loader!../../components/meta/index.html')} #include("../../components/meta/index.html")<title>Document</title><link rel="shortcut icon" href="/favicon.ico"><link href="/index_464b0061.css" rel="stylesheet"></head><body class="container-fluid"><div>homeIndex</div><table class="table table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table><script type="text/javascript" src="/index_64e61341.js"></script></body></html>


    2019-07-24
收起评论
看过的人还看
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 3836 人已学习

拼团 ¥99 原价 ¥129
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33049 人已学习

¥99
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 3022 人已学习

拼团 ¥99 原价 ¥129
浏览器工作原理与实践

李兵  前盛大创新院高级研究员

43讲 | 6239 人已学习

拼团 ¥79 原价 ¥99