[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”或扫描下面的二维码