课件和源代码下载地址

精选留言(25)

• 
  袋袋

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

   4

   15
• 
  SCRD

  2019-06-13

  特别想问一下，webpack和后端项目多页面怎么结合，尤其是更新相应文件缓存，还是说一定要和gulp结合

  作者回复: 更新文件缓存是生成的文件指纹去控制的，文件变化后，那么文件指纹会发生相应变化，就不会出现缓存还在的问题了。顺便说下通常的文件缓存策略：
  
  html: header 头的 cache-control 会设置成 no-cache。也就是 html 文件不会走缓存
  
  css/js/img 等静态资源：header头的 cache-control 设置成强缓存，缓存时间通常是1年的样子。通过文件指纹控制缓存是否失效，文件指纹一变，请求就不会走旧文件了。

  

   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 匹配即可。

  

   3
• 
  zjlyyq

  2019-06-14

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

  作者回复: 此处的匹配规则是 src目录的子目录，并且这个子目录含有 index.js 入口文件。
  
  我们把匹配的内容在src 和 index.js 之间，因此需要用 （.*）包裹起来获取

  

   2
• 
  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遍历都行，看你编码习惯，作者在用的时候顺便说明一下就好了，导致评论里有很多人不理解。

  展开

  

   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
• 
  徐จุ๊บ

  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高么

  

  
• 
  刘小宅

  2019-08-08

  老师我这里有个疑惑， 就是如果我要打包一个多页面应用， 但是我的项目中只有一个html， 但是src下有多个文件夹，每个文件夹代表着一个活动页面，如何让我的每一个活动页面下的js文件共用一个html，并且打包成多页面的应用，这个问题困惑了许久，希望老师能解惑

  

  
• 
  dudustyle

  2019-07-24

  老师，我引入公共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>
  
  
  

  展开

  

  
• 
  ZERO To One

  2019-07-14

  踩了个大坑！记录下：
  多页面打包的时候我想动态设置HTMLWebpackPlugin生成的HTML文件的title。采取的方式是在每个页面下放一个package.json 文件，作为配置文件，结构体是
  {
      "title":"对应页面的标题"
  }
  然后我就发现，webpack打包开始报错了！
  一直提示react的jsx语法解析问题！
  
  最后删掉package.json就ok了。从现象来看，应该是入口文件同级目录下如果有package.json的话，会导致webpack读取不到babelrc的配置吧。

  展开

  

  
• 
  micstone

  2019-07-06

  老师，你好，比如修改了其中一个页面，这样配置的话会把所有的页面打包呢

  作者回复: 是的，不过开发环境是增量构建的，只有发布阶段是全量构建。

  

  
• 
  冷夫冲

  2019-06-26

  老师，你好！请问我用mini-css-extract-plugin插件提取了css文件放到单独文件夹内，里面的背景图片引用地址报错该怎么处理

  作者回复: 图片引用的路径是不是写错了呢？可以贴下图片引用代码看看吗

  

  