const path = require('path');
const webpack = require('webpack');
// 自动生成html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    entry: {
        // 这里的上下文有点让我不太理解，./应该是当前目录下的，但是不这么写一定出错
        // 我把这里理解为声明提升- -，entry路口的当前目录是项目的根目录
        app: ['./src/index.js', 'webpack-hot-middleware/client?reload=true'],
    },
    output: {
        path: path.resolve(__dirname, '..', 'dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[name].[hash:5].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                loaders: ['react-hot-loader', 'babel-loader'],
                include: path.resolve(__dirname, '..', 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                include: path.resolve(__dirname, '..', 'src')
            },
            {
                test: /\.less$/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
                include: path.resolve(__dirname, '..', 'src')
            },
            {
                test: /.(png|jpe?g|gif|svg)$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            'components': resolve('src/components'),
            'router': resolve('src/router'),
            'store': resolve('src/store'),
            'static': resolve('src/static'),
            'pages': resolve('src/pages')
        }
    },
    devtool: 'cheap-module-eval-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hoop-App',
            template: 'index.html',
            filename: 'index.html',
            inject: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}