[webpack] 如何把代碼內聯進html中？

作者：滴滴前端公共團隊——鍾宇飛

個人知乎鏈接：水乙 - 知乎

前言：

我們平常在打包文件的時候，有時候需要把 js、css 等代碼內聯進 html 中，減少文件的請求，優化載入速度。

用過 fis 的同學應該對 __inline 語法比較熟悉，它就是用來把代碼內聯進 html 的，其實 webpack 也可以藉助插件做到這一點的

本文就來介紹這樣的一個插件 html-webpack-inline-source-plugin 。

正文：

相信你對 webpack 的 html-webpack-plugin 插件不陌生，我們經常用它來生成html文件。

而在這個插件的官方文檔中，就推薦了我們這篇文章的主角 html-webpack-inline-source-plugin。

html-webpack-inline-source-plugin 是 html-webpack-plugin 的第三方擴展插件，通過增加一個 {inlineSource: regex string} 選項來內聯你的靜態文件到 html 中。

安裝

由於是 html-webpack-plugin 的擴展，所以需要先安裝 html-webpack-plugin。

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

使用

在 webpack config 中引入:

var HtmlWebpackInlineSourcePlugin = require(html-webpack-inline-source-plugin);n

在 webpack config 的 plugins 選項中添加插件:

plugins: [ n new HtmlWebpackPlugin(),n new HtmlWebpackInlineSourcePlugin()n]n

這一步不會做任何事情，當你在 HtmlWebpackPlugin 的配置中增加一個 inlineSource 選項來匹配 css 和 js ，最終才會將資源內聯到 html 中。如下：

plugins: [ n new HtmlWebpackPlugin({n inlineSource: .(js|css)$ // embed all javascript and css inlinen }), n new HtmlWebpackInlineSourcePlugin()n]n

我們通過一個實例來具體說明

// 引入各種需要的包nnvar webpack = require(webpack);nvar path = require(path);nvar HtmlWebpackPlugin = require(html-webpack-plugin);nvar HtmlWebpackInlineSourcePlugin = require(html-webpack-inline-source-plugin);nvar ExtractTextPlugin = require("extract-text-webpack-plugin");nvar autoprefixer = require(autoprefixer);nmodule.exports = {n entry: {n index:"./src/js/index.js"n },n output: {n path: "./dist/",n filename: "js/[name].js",n chunkFilename: "js/[name].js"n }, n module: {n loaders: [n {n test: /.less$/, n // 此處可以使用ExtractTextPlugin插件將css提取出來，也可以不用，而通過style-loader以css-in-js的方式內聯進去。n // 但是更推薦單獨提取出來，可以讓樣式表在頭部就載入，優化體驗。n loader: ExtractTextPlugin.extract([ n css-loader, n postcss-loader, n less-loadern ])n },n { n // 編譯es6n test: /.js$/,n exclude: /node_modules/,n loader: "babel-loader"n }n ]n },n postcss: function () { n return [autoprefixer]; // 使用autoprefixer自動加前綴n },n plugins: [ n new ExtractTextPlugin(style.css), // 實例化提取css插件n new HtmlWebpackPlugin({ // 實例化生成html插件n title: title,n template: ./src/index.html, n filename: ./index.html, n inlineSource: .(js|css)n : , // 插入到html的css、js文件都要內聯n minify: {n removeComments: true,n collapseWhitespace: truen },n chunks: ["index"]n }), n new HtmlWebpackInlineSourcePlugin() // 實例化內聯資源插件n ]n};n

更多內容歡迎掃碼關注 DDFE 公眾號~

推薦閱讀：