[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-plugin複製程式碼

使用

在 webpack config 中引入:

var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');複製程式碼

在 webpack config 的 plugins 選項中新增外掛:

plugins: [  
    new HtmlWebpackPlugin(),
    new HtmlWebpackInlineSourcePlugin()
]複製程式碼

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

plugins: [  
    new HtmlWebpackPlugin({
        inlineSource: '.(js|css)' // 內聯所有 javascript、css。注意：此處正則應在末尾增加一個$，但是掘金的程式碼解析有問題……
    }),  
    new HtmlWebpackInlineSourcePlugin()
]複製程式碼

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

// 引入各種需要的包

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
module.exports = {
    entry: {
        index:"./src/js/index.js"
    },
    output: {
        path: "./dist/",
        filename: "js/[name].js",
        chunkFilename: "js/[name].js"
    },    
    module: {
        loaders: [
            {
                test: /\.less$/,                
                // 此處可以使用ExtractTextPlugin外掛將css提取出來，也可以不用，而通過style-loader以css-in-js的方式內聯進去。
                // 但是更推薦單獨提取出來，可以讓樣式表在頭部就載入，優化體驗。
                loader: ExtractTextPlugin.extract([ 
                    'css-loader',                    
                    'postcss-loader', 
                    'less-loader'
                ])
            },
            {                
                // 編譯es6
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    postcss: function () {        
                return [autoprefixer]; // 使用autoprefixer自動加字首
    },
    plugins: [        
        new ExtractTextPlugin('style.css'), // 例項化提取css外掛
        new HtmlWebpackPlugin({ // 例項化生成html外掛
            title: 'title',
            template: './src/index.html', 
            filename: './index.html', 
            inlineSource:  '.(js|css)',  // 插入到html的css、js檔案都要內聯。注意：此處正則應在末尾增加一個$，但是掘金的程式碼解析有問題……
            minify: {
                removeComments: true,
                collapseWhitespace: true
            },
            chunks: ["index"]
        }),        
        new HtmlWebpackInlineSourcePlugin() // 例項化內聯資源外掛
    ]
};複製程式碼

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公眾號：微信搜尋公眾號“DDFE”或掃描下面的二維碼