>[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上就有了