var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var path = require('path');
module.exports = {
    mode: 'production', // production,development
    entry: {
        app: path.join(__dirname, 'src', 'index.js')
    },
    output: {
        filename: '[name].bundle.[hash].js',
        path: path.join(__dirname, 'dist'),
    // publicPath: './'
    },
    module: { // 处理对应模块
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //处理css
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        outputPath: 'images/', //输出到images文件夹
                        limit: 5000 //是把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
            },
            {
                test: /\.js[x]?/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["env"]
                    }
                }
            }
        ]
    },
    devServer: {
        port: 7000,
        // host: '0.0.0.0',
        host: 'localhost',
        contentBase: path.join(__dirname, "dist"),
        historyApiFallback: {
            rewrites: [{
                from: /./,
                to: '/404.html'
            }]
        },
        // overlay: true, // 显示编译出错信息
        // stats: "errors-only",
        // quiet: true,
        compress: true,
        hot: true,
        inline: true
    },
    plugins: [
        // 热更新，热更新不是刷新
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({ //配置
            title: 'webpack4学习demo', // 设置文件标题
            filename: 'index.html', //输出文件名
            template: './public/index.html', //以当前目录下的index.html文件为模板生成dist/index.html文件
        }),
        // new webpack.DllReferencePlugin({
        //     manifest: require(path.join(__dirname, 'dist', 'vue.manifest.json')),
        // }),
        new UglifyJSPlugin()
    //之前配置
    // new webpack.optimize.SplitChunksPlugin({
    //     name: 'common', // 如果还要提取公共代码,在新建一个实例
    //     minChunks: 2, //重复两次之后就提取出来
    //     chunks: ['index', 'a'] // 指定提取范围
    // })
    ],
    //现在配置
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: { // 抽离自己写的公共代码
                    chunks: "initial",
                    name: "common", // 打包后的文件名，任意命名
                    minChunks: 2, //最小引用2次
                    minSize: 0 // 只要超出0字节就生成一个新包
                },
                vendor: { // 抽离第三方插件
                    test: /node_modules/, // 指定是node_modules下的第三方包
                    chunks: 'initial',
                    name: 'vendor', // 打包后的文件名，任意命名
                    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                    priority: 10
                },
            }
        }
    }
}