const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const ROOT = process.cwd();

const DIST = path.resolve(ROOT, 'dist', 'ide');
const {getLoaderAbsolutePath} = require('./utils');

function resolve(dir) {
    return path.join(ROOT, dir);
}

module.exports = {
    mode: process.env.NODE_ENV || 'development',
    entry: {
        API: './runtime/bl.ide.js',
        COMPONENT: './components/index.ide.js',
    },
    output: {
        filename: `[name].js`,
        path: path.resolve(path.dirname(__dirname), 'dist', 'ide'),
        library: '[name]',
        libraryTarget: 'window',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')]
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'babel-loader'
                },
                {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        appendTsSuffixTo: [
                            '\\.vue$'
                        ]
                    }
                }]
            },
            {
                test: /\.pug$/,
                oneOf: [
                    // 这条规则应用到 Vue 组件内的 `<template lang="pug">`
                    {
                        resourceQuery: /^\?vue/,
                        use: [
                            'pug-plain-loader'
                        ]
                    },
                    // 这条规则应用到 JavaScript 内的 pug 导入
                    {
                        use: ['raw-loader', 'pug-plain-loader']
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', getLoaderAbsolutePath('css-loader'),]
            },
            {
                test: /\.less$/,
                use: ['vue-style-loader', getLoaderAbsolutePath('css-loader'), 'less-loader']
            },
            {
                test: /\.styl$/,
                use: ['vue-style-loader', getLoaderAbsolutePath('css-loader'), 'postcss-loader', 'stylus-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 20000
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /bili-small-app\/runtime\/bl/,
                use: [
                    { loader: 'babel-loader' },
                    {
                        loader: 'string-replace-loader',
                        options: {
                            search: '__BLJS__',
                            replace: 'import bl from \'./bl.web\'',
                            flags: 'g'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': ROOT
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            Vue: ['vue/dist/vue.esm.js', 'default'],
            ENV: '/' + path.relative('/', "./env/" + (process.env.NODE_ENV || "development") + '.js')
        }),
        new CleanWebpackPlugin(DIST, {
            root: ROOT,
            verbose: false
        }),
        new VueLoaderPlugin()
    ],
    externals: {
        vue: 'Vue'
    }
};
