webpack打包进内联html

用到一个新插件:html-webpack-inline-source-plugin(依赖于html-webpack-plugin)

1.安装

npm i -D html-webpack-inline-source-plugin html-webpack-plugin

2.编写webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve('./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html',
            filename: 'index-[hash].html',
            inject: 'head',
            inlineSource: '.(js|css)'
        }),
        new HtmlWebpackInlineSourcePlugin()
    ]
}

需要在html-webpack-plugin里添加  inlineSource: '.(js|css)'

原文地址:https://www.cnblogs.com/amiezhang/p/9723565.html