webpack是如何将js/css的链接写入html文件的

关于baseUrl

baseUrl是生产环境打包资源的前缀地址，写上这个，就可以直接在最终的html文件中，生成线上的访问地址：

1
2
3
4
module.exports = {
  baseUrl: 'http://s.thsi.cn/js/bigscreen/res/20200513/', //生产环境打包资源的前缀地址
  outputDir: process.env.outputDir, //输出目录 默认dist/html
}

这个地址后面接的路径，是相对哪个目录的呢？是相对outputDir的。

注意，Deprecated since Vue CLI 3.3, please use publicPath instead。

和pages的设置有关吗？

有关系，当你通过pages配置了多页面时，最终写入到html中的js文件名，就是你配置的page的键名，请看官方文档：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page'
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    screen8: {
      entry: 'src/pages/screen8/main.js',
      template: 'public/screen8.html',
      filename: 'screen8.html',
      title: 'screen8'
    }
  }

pages下指定的template不存在会怎么处理？

见注释：

1
2
3
4
5
6
7
8
9
10
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
screen8: {
  entry: 'src/pages/screen8/main.js',
  template: 'public/screen8.html',
  filename: 'screen8.html',
  title: 'screen8'
}

chunk-vendors和chunk-common是什么？

看官方文档：https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk