require('babel-polyfill');
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin");
const extractTextWebpackPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack")

module.exports = {
    entry: ["babel-polyfill", "./src/main.js"],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].[hash:8].js",
        // publicPath: "/" //开发路径-
        publicPath: "./" //打包路径
    },
    resolve: {
        alias: {
            "vue": "vue/dist/vue.js"
        }
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.(png|jpe?j|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: 'images/[name].[ext]?[hash:8]'
                }
                //图片文件大小小于limit的数值，就会被改写成base64直接填入url里面，
                //不然会输出到dist/img目录下，[name]原文件名，[ext]原后缀，[hash]在url上加上一点哈希值避免缓存。
            },
            {
                test: /\.(woff2?|eot|ttf|otf|woff)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 8192,
                    name: 'fonts/[name].[ext]?[hash:8]'
                }
                //和上面一致
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: [{
                            'css': 'style-loader!css-loader'
                        },
                        {
                            'scss': 'style-loader!css-loader!sass-loader'
                        },
                        {
                            'less': 'style-loader!css-loader!less-loader'
                        }
                    ]
                }
            },
            {
                test: /\.css$/,
                use: extractTextWebpackPlugin.extract({
                    fallback: {
                        loader: 'style-loader',
                        options: {
                            singleton: false // 为true表示将页面上的所有css都放到一个style标签内
                        }
                    },
                    use: [
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function () {
                                    return [
                                        require("cssgrace"),
                                        require("autoprefixer")
                                    ]
                                }
                            }
                        }
                    ]
                })
            },
            {
                test: /\.scss$/,
                use: extractTextWebpackPlugin.extract({
                    fallback: {
                        loader: 'style-loader',
                        options: {
                            singleton: false // 为true表示将页面上的所有css都放到一个style标签内
                        }
                    },
                    use: [
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function () {
                                    return [
                                        require("cssgrace"),
                                        require("autoprefixer")
                                    ]
                                }
                            }
                        },
                        "sass-loader"
                    ]
                })
            },
            {
                test: /\.less$/,
                use: extractTextWebpackPlugin.extract({
                    fallback: {
                        loader: 'style-loader',
                        options: {
                            singleton: false // 为true表示将页面上的所有css都放到一个style标签内
                        }
                    },
                    use: [
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function () {
                                    return [
                                        require("cssgrace"),
                                        require("autoprefixer")
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            }
        ]
    },
    devtool: '#eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        hot: true,
        host: "0.0.0.0",
        port: 6604,
        historyApiFallback: true
    },
    plugins: [
        new openBrowserWebpackPlugin({
            url: "http://localhost:6604"
        }),
        new htmlWebpackPlugin({
            template: "index.html",
            filename: "index.html",
            inject: true,
            favicon: path.resolve('favicon.ico')
        }),
        new extractTextWebpackPlugin({
            filename: "css/app.[hash:8].css",
            allChunks: true,
            disable: false
        }),
        new webpack.ProvidePlugin({
            axios: "axios",
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
}