var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const isDev = process.env.NODE_ENV === 'development'
const cdnConfig = {
    css: ['http://127.0.0.1:28090/public/ol.css'],
    js: ['http://127.0.0.1:28090/public/resource.min.js', 'http://127.0.0.1:28090/public/ol.js', 'http://127.0.0.1:28090/public/vue.js'],
}
const olRegExp = /^ol\/.+$/
const slashReplacerRegExp = new RegExp('/', 'g')
const extensionReplacerRegExp = new RegExp('\\.js$')
module.exports = {
    entry: isDev ? ['babel-polyfill', './src/main.js'] : './src/index.js',
    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'aegean-ol-helper.min.js',
        library: 'OlHelper',
        libraryTarget: 'umd',
    },
    externals: [
        {
            vue: {
                commonjs: 'vue',
                commonjs2: 'vue',
                amd: 'vue',
                root: 'Vue',
            },
            ol: 'ol',
            'gis-common': {
                commonjs: 'gis-common',
                commonjs2: 'gis-common',
                amd: 'gis-common',
                root: 'Gis',
            },
        },
        /* function (context, request, callback) {
            // 打包Control和interaction还是有问题
            if (olRegExp.test(request)) {
                const replacedWith = request.replace(extensionReplacerRegExp, '').replace(slashReplacerRegExp, '/')
                return callback(null, replacedWith)
            }
            callback()
        }, */
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {},
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 100000,
                },
            },
            {
                test: /\.scss$/,
                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.sass$/,
                use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],
            },
            {
                test: /\.svg$/,
                include: [path.resolve('src/assets/icons')],
                loader: 'svg-sprite-loader',
                options: {
                    symbolId: 'icon-[name]',
                },
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
        }),
        new HtmlWebpackPlugin({
            title: 'aegean-ol-helper',
            template: './index.html',
            cdnConfig,
        }),
    ],
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
        extensions: ['*', '.js', '.vue', '.json'],
    },
    devServer: {
        host: '0.0.0.0',
        contentBase: path.join(__dirname, 'dist'),
        open: false, // 自动打开浏览器
        port: 8080, // 端口号
        hot: true,
    },
    performance: {
        hints: false,
    },
    devtool: process.env.NODE_ENV === 'development' ? '#source-map' : 'none',
    optimization: {
        minimize: true,
    },
}