const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const fs = require('fs');

/**
 * 自制注入页首和页脚html模块代码的webpack插件
 */
function InjectBlogHtmlPlugin() {
    console.info('html模块注入')
}

InjectBlogHtmlPlugin.prototype.apply = function (compiler) {
    compiler.hooks.compilation.tap('InjectBlogHtmlPlugin', (compilation) => {
        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(
            'InjectBlogHtmlPlugin',
            function (data, callback) {
                // 注释部分是原先js部分替换模板占位符，现在用空字符串替换，因为app.js中就引入了js以实现热更新，这里重复了
                // const headerJsText = fs.readFileSync(`./src/js/header.js`).toString()
                const headerHtmlText = fs.readFileSync(`./src/template/header.html`).toString()

                // const footerJsText = fs.readFileSync(`./src/js/footer.js`).toString()
                const footerHtmlText = fs.readFileSync(`./src/template/footer.html`).toString()

                // data.html = data.html.replace('{{headerHtml}}', headerHtmlText.replace("{{jsContent}}", headerJsText))
                // data.html = data.html.replace('{{footerHtml}}', footerHtmlText.replace("{{jsContent}}", footerJsText))

                data.html = data.html.replace('{{headerHtml}}', headerHtmlText.replace("{{jsContent}}", ''))
                data.html = data.html.replace('{{footerHtml}}', footerHtmlText.replace("{{jsContent}}", ''))

                callback(null, data)
            }
        )
    })
};

const htmlNames = [
    'categoryList',
    'index',
    'read'
]

const config = {
    entry: ['./app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ? 'http://images.cnblogs.com/cnblogs_com/vvjiang/996881/' : '/'
    },
    devServer: {
        port: 8686,
        open: true,
        compress: true,
        inline: true,
        index: 'index.html',
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ]
            }, {
                test: /\.css$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.less$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ],
            },
            {
                test: /\.(htm|html)$/,
                use: [
                    'raw-loader'
                ]
            }
        ],
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})
        ],
    },
    plugins: [
        new miniCssExtractPlugin({ filename: '[name].css', allChunks: false }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),

    ]
};

htmlNames.forEach((pageName) => {
    const htmlPlugin = new HtmlWebpackPlugin({
        filename: `${pageName}.html`,
        template: `./template/${pageName}.html`,
        hash: true,
        inject: "head"
    });
    config.plugins.push(htmlPlugin);
})

config.plugins.push(new InjectBlogHtmlPlugin());
module.exports = config;