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

//导入每次删除文件夹的插件
const cleanWebpackPlugin = require('clean-webpack-plugin')

//导入抽取css样式的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
//导入压缩css样式的插件
const optimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports ={
    mode:'production',
    entry: {
        app: path.join(__dirname, './src/main.js'),
        vendors: ['jquery']   //把要抽离的第三方名称,放到这个数组中
    },
    output: { 
        path: path.join(__dirname, './dist'),
        filename: 'js/[name].[hash:6].bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
            }
        }),
        new cleanWebpackPlugin(['dist']),
        new ExtractTextPlugin('css/[name].css'),
        new optimizeCssAssetsPlugin
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors:{
                    test: /node_modules/,
		            chunks: "initial",
                    name: "vendors",
                },
            }
        }
    },
    module:{
        rules: [
            { 
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                    publicPath: '../'   //指定抽取的时候,自动为路径加上 ../前缀
                })
            },
            { 
                test: /\.scss$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','sass-loader'],
                    publicPath: '../'   //指定抽取的时候,自动为路径加上 ../前缀
                })
            },
            { 
                test: /\.(png|gif|bmp|jpg|jpeg)$/, 
                use: ['url-loader?limit=5000&name=images/[hash:8]-[name].[ext]']
            },
            { 
                test: /\.js$/, 
                use: 'babel-loader', 
                exclude: /node_modules/
            },
        ]
    }
}