给你点条路子，可以参照官方文档用 CopyWebpackPlugin 和 MiniCssExtractPlugin 😜

你的版本不对：如果用的是html-webpack-plugin 3.2.0版本 就是老师的写法，不要太关注细节，都查询文档才是你要学习的

大写开关就是个类，来处理了，小写就是个引入，解译有不同吧

Windows下的VS Code中，选择文本的时候按住Alt

Mac下应该类似

正常，这应该是webpack4的新特新，不会跟之前的一样有注释

webpack4 确实会报错。

要把js弄成inline的话，有另一个方法，需要一个插件 叫：html-webpack-inline-source-plugin，用来将静态资源inline注入。

安装：

npm install html-webpack-inline-source-plugin --save-dev

在webpack.config.js头部写上：

var htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

在需要inline的地方加上：

new htmlWebpackPlugin({
            //... 之前的代码 
            inlineSource:  '.(js|css)$', // 正则表达式, 匹配js文件和css文件,你可以修改匹配特定的文件
  }),

在plugins的最后加上：

plugins:[
         //... 之前的代码
        new htmlWebpackInlineSourcePlugin()
]

之后，npm run webpack 打包一下就可以了。

前面那样写是为了输出展示给我们看，后来真正要引入的时候不就是用了后面那种写法吗？

请贴出错误代码。

这里呢写下几个可能原因你看一下：

1、<%= %>里边是结果输出，例如：<%= array[1] %>。

2、<%  %>里边是函数，关键字，逻辑，例如：<% for(var i = 0, i < 9; i++){  %>。

3、<%空格+代码+空格%>，<%=空格+代码+空格%>，开始结束加空格这样规范些。

4、有头无尾，有尾无头，例如:只有<% if(...) %>，没有结束的<% } %>。

5、变量名拼写出错，仔细检查一下。

居然是常量老包的表情太给力了，我都不会了

对啊，是这样没错

找到原因了，语法里多加了=号，去掉就行了

plugin  里定义 不同的template

== 和 ！=   === 和 ！==

index.html确实变大了，但是 使用inline并没有导致数据变多。数据大小  = index.html的大小 + main.js的大小 + a.js的大小 。使用inline仅仅是将这三个文件合并而已，这样就可以使用一次http请求 获取更多的数据，减少了http请求的次数。使用inline前与使用inline后 浏览器处理的数据大小是一样的，只是减少了http请求的次数，而http请求是非常耗时的，所以提升了性能。

这位同学 你第一行代码 var HtmlWebpackPlugin = require("html-webpack-plugin");定义的变量是 HtmlWebpackPlugin 首字母是大写的 下文使用的时候却使用htmlWebpackPlugin 首字母是小写的 肯定会报变量未定义的错误。

<%= htmlWebpackPlugin.options.title %>

可以的

webpack4 确实会报错。

要把js弄成inline的话，有另一个方法，需要一个插件 叫：html-webpack-inline-source-plugin，用来将静态资源inline注入。

安装：

npm install html-webpack-inline-source-plugin --save-dev

在webpack.config.js头部写上：

var htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

在需要inline的地方加上：

new htmlWebpackPlugin({
  //... 之前的代码
  inlineSource:  '.(js|css)$', // 正则表达式, 匹配js文件和css文件,你可以修改匹配特定的文件  
}),

在plugins的最后加上：

plugins:[
  //... 之前的代码
  new htmlWebpackInlineSourcePlugin()
]

之后，npm run webpack 打包一下就可以了。

安装使用clean-webpack-plugin

发现这样插入才行compilation.assets[htmlWebpackPlugin.files.chunks.a.entry.substr(htmlWebpackPlugin.files.publicPath.length).split('?')[0]]._value 

source方法报错,直接调用_value读取源码

index页面下不要留注释

细心点for里面的files下的chunks

for(var k in htmlWebpackPlugin.files.chunks)

可以用,还不错！搭配html-webpack-plugin一起使用

https://www.npmjs.com/package/html-webpack-inline-source-plugin

官网讲得很详细

<script type="text/html">
<%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>
</script>

不用特殊处理吧 ，如果文件内容不变hash也不会变化。

有四个值true | 'head' | 'body' | false，默认是body，即将脚本插入到body的最底部

必须每个页面都要引用main.js,如果你每个页面打印的是main.js的链接话，excludeChucks: ['c','a','main']表示排除，不引用c.js,a.js,main.js，引用的是剩下的b.js