[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」或掃描下面的二維碼