作者回复: 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

7

20

SCRD

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

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

2019-06-13

2

10

脱尼

老师您好！生成的每个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



4

灯火阑珊

这里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



4

2020

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

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

2019-06-14

2

2

飞天

老师可以提高录制频率吗？您讲得非常好，我都看完，代码也写完一遍啦

作者回复: 厉害了👍 这么爱学习

2019-06-16



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





micstone

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

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

2019-07-06





KaKa

老师，有个地方不太懂，希望老师能够私回我。 const pageName = match && match[1] 等号右边为啥这样写？直接 const pageName = match[1] 不可以吗？我基础不太好··希望老是能够解答

作者回复: 这个主要是为了兼容异常的情况哈，比如这个正则如果返回的结果为 null，这个时候直接用 match[1]就报错了。其实，日常编写的很多 JS 业务代码也需要进行相关变量存在与否的判断

2019-06-11





老师您好，跟着您的视频来写，发现后面报错enrty is not defined是怎么回事？

作者回复: 可以贴一下你的 webpack 配置吗？我帮你看看哈。另外你可以把 entry 用 console.log 打印出来看看

2019-06-11





收起评论