# 现代化css方法论 CSS WorkFlow

import('./index.css');
const banner = {
    init() {
        console.log('banner js 入口');
    }
}
export default banner;

import('./index.css');
const list = {
    init() {
        console.log('list js 入口');
        $('#js-h1').click(function() {
            alert('欢迎选择图书');
        })
    }
}
export default list;

module.exports = {
    plugins: {
        'postcss-preset-env': {
            browsers: 'last 2 versions',
            stage:0,
            features:{
                'nesting-rules': true
            }
        }
    }
}

const argv = require('yargs-parser')(process.argv.slice(2));
const _mode = argv.mode || 'development';
const _mergeConfig = require(`./config/webpack.${_mode}.js`);
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');
const { resolve, join } = require("path");
const HtmlAfterPlugin = require('./config/htmlAfterPlugin');
const _modeFlag = _mode == 'development' ? true : false;

// 入口文件
let _entry = {};
let _plugins = [];
// 寻找全部的entry
const files = glob.sync('./src/web/views/**/*.entry.js');
for(let item of files) {
    if (/.+\/([a-zA-Z]+-[a-zA-Z]+)(\.entry\.js$)/g.test(item) == true) {
        const entryKey = RegExp.$1;
        const [dist, template] = entryKey.split('-');
        _entry[entryKey] = item;
        _plugins.push(new HtmlWebpackPlugin({
            filename: `../views/${dist}/pages/${template}.html`,
            template: `src/web/views/${dist}/pages/${template}.html`,
            inject:false,
            chunks: ["runtime", entryKey]
        }));
    }
}

const webpackConfig = {
    entry: _entry,
    watch: _modeFlag,
    output: {
        path: join(__dirname, "./dist/assets"),
    },
    // ------------------------------
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {loader: 'css-loader',
                options: {
                    importLoaders: 1
                }},
                'postcss-loader'
                ]
            }
        ]
    },
    // ------------------------------
    resolve: {
        alias: {
            "@components": resolve(__dirname, 'src/web/components'),
        },
    },
    optimization: {
        runtimeChunk: {
            name: 'runtime'
        }
    },
    plugins: [
        ..._plugins,
        new HtmlAfterPlugin()
    ],
}
// 将合并后的配置导出
module.exports = merge(webpackConfig, _mergeConfig);

const argv = require('yargs-parser')(process.argv.slice(2));
const _mode = argv.mode || 'development';
const _mergeConfig = require(`./config/webpack.${_mode}.js`);
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const glob = require('glob');
const { resolve, join } = require("path");
const HtmlAfterPlugin = require('./config/htmlAfterPlugin');
const _modeFlag = _mode == 'development' ? true : false;
// --------------------------------
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// --------------------------------
// 入口文件
let _entry = {};
let _plugins = [];
// 寻找全部的entry
const files = glob.sync('./src/web/views/**/*.entry.js');
for (let item of files) {
    if (/.+\/([a-zA-Z]+-[a-zA-Z]+)(\.entry\.js$)/g.test(item) == true) {
        const entryKey = RegExp.$1;
        const [dist, template] = entryKey.split('-');
        _entry[entryKey] = item;
        _plugins.push(new HtmlWebpackPlugin({
            filename: `../views/${dist}/pages/${template}.html`,
            template: `src/web/views/${dist}/pages/${template}.html`,
            inject: false,
            chunks: ["runtime", entryKey]
        }));
    }
}

const webpackConfig = {
    entry: _entry,
    watch: _modeFlag,
    output: {
        path: join(__dirname, "./dist/assets"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // --------------------------------
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {},
                    },
                    // --------------------------------
                    // 'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            }
        ]
    },
    resolve: {
        alias: {
            "@components": resolve(__dirname, 'src/web/components'),
        },
    },
    optimization: {
        runtimeChunk: {
            name: 'runtime'
        }
    },
    plugins: [
        // --------------------------------
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: _modeFlag ? 'style/[name].css' : 'style/[name].[contenthash:5].css',
            chunkFilename: _modeFlag ? 'style/[id].css' : 'style/[id].[contenthash:5].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
        // --------------------------------
        ..._plugins,
        new HtmlAfterPlugin()
    ],
}
// 将合并后的配置导出
module.exports = merge(webpackConfig, _mergeConfig);

const pluginName = 'htmlAfterPlugin';
const assetsHelp = (data) => {
    let js = [];
    let css = [];
    const dir = {
        css: item => `<link rel="stylesheet" href="${item}">`,
        js: item => `<script src="${item}"></script>`,
        lazyjs: item => `<script class="lazyload-js" src="${item}"></script>`,
    }
    // const whiteList = new Map();
    // whiteList.set('whiteList', true);
    for(let jsitem of data.js) {
        if (/runtime/g.test(jsitem)) {
            js.push(dir.js(jsitem));
        } else {
            js.push(dir.lazyjs(jsitem));
        }
    }
    for(let cssitem of data.css) {
        css.push(dir.css(cssitem));
    }
    return {
        js,
        css
    }
}
class HtmlAfterPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap(pluginName, compilation => {
            // HtmlWebpackPlugin留下的钩子，在插入html之前等一下，必须要泡在HtmlWebpackPlugin插件之后
            compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(pluginName, htmlPluginData => {
                // htmlPluginData能拿到相应的html页面，替换掉写好的占位符
                // 获取对应的html
                let _html = htmlPluginData.html;
                _html = _html.replace(/@layouts/g, '../../layouts');
                _html = _html.replace(/@components/g, '../../../components');
                // 拿到要插入的js
                const result = assetsHelp(htmlPluginData.assets);
                // 将js文件替换占位符
                _html = _html.replace('<!-- injectjs -->', result.js.join(''));
                _html = _html.replace('<!-- injectcss -->', result.css.join(''));
                htmlPluginData.html = _html;
            })
        })
    }
}
module.exports = HtmlAfterPlugin;