const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    context: __dirname + '/src',

    entry: [
        'react-hot-loader/patch',
        __dirname +'/src/index.jsx',
    ],

    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '/',
        filename: 'bundle.js',
    },

    resolve: {
        extensions: ['.js', '.jsx', '.css','.less'],
        alias: {
            '@': path.resolve(__dirname, './src'),
            'components': path.resolve(__dirname, './src/components'),
            'pages': path.resolve(__dirname, './src/pages'),
            'fetch': path.resolve(__dirname, './src/fetch'),
            'mock': path.resolve(__dirname, './mock'),
            'iconfont': path.resolve(__dirname, './src/static/iconfont'),
            'static': path.resolve(__dirname, './src/static'),
            'reducers': path.resolve(__dirname, './src/redux/reducers'),
            'utils': path.resolve(__dirname, './src/utils'),
            'public': path.resolve(__dirname, './public'),
        }
    },

    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-react', ["@babel/preset-env",{"useBuiltIns": "entry"}]],
                    plugins: [
                        'react-html-attrs',
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        'react-hot-loader/babel'
                    ],
                },
            },
            {
                test: /\.(css|less)$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/static'),
                    path.resolve(__dirname, 'src/utils'),
                ],
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            // singleton: true,
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            sourceMap: true,
                            localIdentName: '[name]_[local]_[hash:base64:5]',
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: () => [
                                // 修复flexbug
                                require('postcss-flexbugs-fixes'),
                                // css浏览器前缀
                                require('autoprefixer')({
                                    browsers: ['ios>=8'],
                                    flexbox: 'no-2009',
                                }),
                            ],
                        },
                    },
                    {
                        loader: 'less-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                exclude: /node_modules/,
                loader: 'url-loader',
                options: {
                    limit: 2000,
                    name: 'static/[name].[hash:8].[ext]',
                },
            },
            {
                test: /\.(eot|svg|ttf|otf|woff?|woff2?)$/i,
                exclude: /node_modules/,
                loader: 'url-loader?limit=5000',
            },
        ],
    },

    plugins: [
        // html 模板插件
        new htmlWebpackPlugin({
            title: 'React App',
            favicon: __dirname + '/public/favicon.ico',
            template: __dirname + '/public/index.html',
        }),

        // 热加载插件
        new webpack.HotModuleReplacementPlugin(),
        
        // 在打包时忽略本地化内容
        new webpack.IgnorePlugin(/\/public$/),

        // 在「生产/开发」构建中使用不同的服务URL(Service URLs)
        new webpack.DefinePlugin({
            'APP_URL': JSON.stringify('http://dev.example.com')
        })
    ],

    devServer: {
        contentBase: './public',   //默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
        historyApiFallback: true,   //不跳转。在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true,   //实时刷新
        hot: true,
        open: true,
        compress: true,
        port: 8088,
        proxy: {
            // 凡是 '/api' 开头的 http 请求，都会被代理到 localhost:3000 上，由 koa 提供 mock 数据。
            // koa 代码在  ./mock 目录中，启动命令为 npm run mock
            '/api': {
                target: 'http://localhost:3000',
                secure: false,
            }
        },
    },
}