• 袋袋
    2019-06-10
    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 结尾中间的内容。也即页面的名字

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

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

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

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

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

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

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

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

    
     2
  • o9
    2019-12-30
    大牛, 您好 , 您视频里的打包方案是按照文件夹名称作为chunkName, 而且值匹配了src下的一层的目录. 我有个疑问, 如果项目比较大,html文件比较多. 这样是不是会出现重复的情况
     2
     1
  • 前端路上的小学生
    2019-08-09
    我的动态打包是利用fs模块的
     1
     1
  • 翰弟
    2019-06-19
    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
    展开
     1
     1
  • Geek_5541c1
    2019-06-17
    老师您好!生成的每个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
        }
      })
    );
    });

    
     1
  • 笨鸟先飞
    2020-02-03
    程老师你好,如果用多个entry入口的方式,然后每个入口都添加一个html-webpack-plugin,那么当一个应用非常多的时候,内存会爆掉,这个应该如何解决呀?

    比如我现在有个vue的多页应用,如果我一次加载所有的entry,然后就会启动失败,报内存溢出的错误, 如下所示。

    我现在的想法是,每次通过路由进行动态加载entry,就是每次只加载一个entry,但是查了下资料发现webpack没有提供很好的接口,老师有没有更好的解决方案呀?
    <--- Last few GCs --->

    [54515:0x102802000] 117841 ms: Mark-sweep 1225.7 (1380.7) -> 1225.7 (1362.2) MB, 312.2 / 0.0 ms (average mu = 0.208, current mu = 0.000) allocation failure GC in old space requested
    [54515:0x102802000] 118234 ms: Mark-sweep 1276.3 (1412.3) -> 1275.8 (1397.8) MB, 236.6 / 0.0 ms (average mu = 0.308, current mu = 0.398) allocation failure GC in old space requested


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

        0: ExitFrame [pc: 0xd2355b078a1]
    Security context: 0x13ff04d1e6e9 <JSObject>
        1: byteLength(aka byteLength) [0x13ff578f95c9] [buffer.js:~509] [pc=0xd2358ba8ba7](this=0x13ff7dd826f1 <undefined>,string=0x13ff5f4526d9 <Very long string[26236413]>,encoding=0x13ff04d3e961 <String[4]: utf8>)
        2: arguments adaptor frame: 3->2
        3: fromString(aka fromString) [0x13ff93393581] [buffer.js:~334] [pc=0xd235892ea10](this=0x13ff7dd826f1 <und...

    FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
     1: 0x10003cf99 node::Abort() [/usr/local/bin/node]
    .......
    展开
    
    
  • 鹏
    2019-12-17
    老师,我想问下,用react的脚手架创建的环境中怎么实现动态多页面打包呢?
    
    
  • Geek_3b0148
    2019-12-13
    老师好,我用webpack进行多页面打包,超过6个都打包不了,卡住不动,请问老师应该怎么优化
    
    
  • Geek_185c7d
    2019-12-13
    按照老师的写的正则报错如下:
    SyntaxError: Invalid regular expression: /src\(.*)\/index\.js/: Unmatched ')'

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

    不知道有遇到同样的吗
    展开
    
    
  • 徐จุ๊บ
    2019-12-06
    老师 entryFiles有可能会是一个对象吗?
    
    
  • QG
    2019-11-17
    src/*/index.js,这里说*号是匹配src下所有的文件,那就是src/a/index.js, src/a/b/index.js都可以匹配到咯,但如果我不想匹配b目录下的怎么办
    
    
  • 海波的搏
    2019-11-11
    ejs不是〈%%〉这种写法吗,${}没看过这种写法,ejs也没介绍,请问这在哪有说明
     1
    
  • 微想未来
    2019-10-16
    为啥我这边写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-11
    entryFiles值为[],为啥。。。
     1
    
  • 成
    2019-09-07
    老师好,我之前一个多页面应用中是用的内置的`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-08-09
    老师,这里用 map是效率比foreach高么
    
    
我们在线,来聊聊吧