const path = require('path');
const HtmlWabpackPlugin = require('html-webpack-plugin');
const CleanWabpackPlugin = require('clean-webpack-plugin');//清除打包目录
const webpck = require('webpack');//清除打包目录
module.exports = {
    mode: 'development',//不压缩代码，设置为production则会压缩代码
    entry: {
        main: './src/index.js', // 以我们的src的index.js为入口进行打包
    },
    ouput: {
        publicPath:'http://www.cdn.com.cn',//可以配置域名
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),//path必须是绝对路径，利用node的path生成
    },
    devServer:{
        contentBase:'/dist',//服务器访问的根目录
        open:true,//自动打开浏览器并打卡访问路径
        hot:true,//开启hotModuleReplace
        hotOnly:true,//即使HMR失败，浏览器也不会自动刷新

    },
    module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        //placeholder占位符
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10240,//不超过10240字节，以base64形式嵌入js文件，大于10240字节，则打包到dist目录下
                    }
                }
            },
            {
                test: /\.scss$/,
                use: {
                    loader: [
                        'style-loader',
                        {
                            loader:'css-loader',
                            options:{
                                importLoaders:2,//css文件里又import其他css文件时，也会从下到上执行所有的loader
                            }
                        },
                        'sass-loader',
                        'postcss-loader',//自动加上厂商前缀，loader的调用顺序：从下到上，从右到左
                    ],

                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',//可以产生source-map,方便看源代码哪里错了,cheap只告知出错行（没有列），加快打包。(建议，pro用cheap-module-source-map)
    resolve: {
        modules: [path.resolve(__dirname, 'source'), path.resolve('node_modules')] //先找当前目录下\source下的文件，找不到的情况下再找node_modules下的文件
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        }, 
        new CleanWebpackPlugin(['dist'])),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization:{
        //webpack中实现代码分割，两种方式
        // 1.同步代码，只需要在webpack中配置optimization
        // 2.异步代码（import），无需做任何配置，会自动进行代码分割

        splitChunks:{ //配置同步代码分割
            chunks:'all'
        },
        usedExports:true,//使用treeShaking 还要在package.json文件中设置sideEffects:['@babel/polly-fill']（不要把polly-fill删除）,
    }

}