>[success] # 关于静态资源内联 [关于内联的具体文章](https://github.com/cpselvis/blog/issues/5) >[info] ## raw-loader ~~~ 1. npm install --save-dev raw-loader@0.5.1 ~~~ ~~~ 1.现在根目录有一个如图所示的文件内容，当我们想把这部门内容加载到，我们的打包后html， 可以使用esj 语法引入 <%= require('raw-loader!./meta.html') %> 2.原理就是读取一个文件直接把这个文件内容全部写入 ~~~  * 做多页面的时候想把每个页面里面都加上这个meta 信息  >[info] ## html-inline-css-webpack-plugin ~~~ 1. 安装这个插件： npm i html-inline-css-webpack-plugin -D 2. 在webpack的配置文件中，增加这个插件 const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default; plugins: [ new HTMLInlineCSSWebpackPlugin(), ], 3. 编译运行可以在dist的html文件中看到效果 ~~~ * 效果  >[danger] ##### 问答 ~~~ 1.style-loader 也是增加内联样式 和上面raw-loade、html-inline-css-webpack-plugin 区别？ 答：style-loader在js中，是靠js生成的，raw-loade是打包时候直接读取对应文件写入， 'html-inline-css-webpack-plugin',先将 css 提取打包成一个独立的 css 文件 （使用MiniCssExtractPlugin.loader），然后读取提取出的 css 内容注入到页面的 style 里面去。 这个过程在构建阶段完成,后两者在html加载时候一起存在，前者只有js加载完后才有 2.raw-loader 导入的js ,css 如何进行压缩处理？ 答：raw-loader 内联进去的样式或者脚本的压缩都是基于 html-webpack-plugin 进行处理的，配置 可以配置'html-webpack-plugin ',minify参数，用于压缩 html 里面内联的 css/js/html内容 ~~~ * 后两者的效果图直接在html上就有了