对于小的项目，我们将css文件和js文件可以直接内联插入到html中，可以减少两次请求，达到优化的效果；当然比较大的项目我们可以注入一些公共的样式和js文件的到html中；
简述
我们使用html-webpack-plugin的插件实现注入
github.com/DustinJacks…
使用
- 下载插件
npm install --save-dev html-webpack-inline-source-plugin
- 修改webpack配置
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin’);
// 注意插件的参数是加在HtmlWebpackPlugin上的，不是插件上的
module.export = {
// ...
plugins: [
new HtmlWebpackPlugin({
inlineSource: '.(js|css)$' // 这里我会注入所有的css和js到html中，也可以根据需求修改正则，只注入部分文件
}),
new HtmlWebpackInlineSourcePlugin()
]
};
注意
- 这里如果要注入css内容，还是需要使用插件（mini-css-extract-plugin）先将css文件抽离才可以注入到html文件中的；
- 因为这个插件是基于html-webpack-plugin，所以，html-webpack-plugin是必须要使用的，否则会报错。
