18-webpack 实现 Html、JavaScript、CSS 内联

在 10- webpack 自动生成 index.html 之后，index.html 的自动生成任务 由 html-webpack-plugin 接管。

有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要，可以直接写到 index.html 中去，但是为了方便维护最好还是把文件独立出来，然后由 webpack 自动完成内联任务。

webpack 完成内联任务，需要借助 raw-laoder 完成。

一、使用模板文件

修改 webpack.config.js 中的 html-webpack-plugin 的配置项，指定模板文件。

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "18-webpack 实现 Html、JavaScript、CSS 内联",
            template:"./src/index.html",//指定首页模板
        }),
    ]
};

二、新建内联文件

index.js

function component() {
    let element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    element.classList.add("hello");
    return element;
}
document.body.appendChild(component());

demo.inline.html

<meta name=keywords content=webpack >
<meta name=description content=webpack是一个功能强大的打包工具>

demo.inline.js