const path = require('path');
const HtmlWabpackPlugin = require('html-webpack-plugin');
const CleanWabpackPlugin = require('clean-webpack-plugin');//清除打包目錄
const webpck = require('webpack');//清除打包目錄
module.exports = {
    mode: 'development',//不壓縮代碼，設(shè)置為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',//服務(wù)器訪問的根目錄
        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字節(jié)互躬，以base64形式嵌入js文件，大于10240字節(jié)泌霍，則打包到dist目錄下
                    }
                }
            },
            {
                test: /\.scss$/,
                use: {
                    loader: [
                        'style-loader',
                        {
                            loader:'css-loader',
                            options:{
                                importLoaders:2,//css文件里又import其他css文件時，也會從下到上執(zhí)行所有的loader
                            }
                        },
                        'sass-loader',
                        'postcss-loader',//自動加上廠商前綴，loader的調(diào)用順序：從下到上闯两，從右到左
                    ],

                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',//可以產(chǎn)生source-map,方便看源代碼哪里錯了,cheap只告知出錯行（沒有列）褥伴，加快打包。(建議漾狼，pro用cheap-module-source-map)
    resolve: {
        modules: [path.resolve(__dirname, 'source'), path.resolve('node_modules')] //先找當(dāng)前目錄下\source下的文件重慢，找不到的情況下再找node_modules下的文件
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        }, 
        new CleanWebpackPlugin(['dist'])),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization:{
        //webpack中實現(xiàn)代碼分割，兩種方式
        // 1.同步代碼逊躁，只需要在webpack中配置optimization
        // 2.異步代碼（import）似踱，無需做任何配置，會自動進行代碼分割

        splitChunks:{ //配置同步代碼分割
            chunks:'all'
        },
        usedExports:true,//使用treeShaking 還要在package.json文件中設(shè)置sideEffects:['@babel/polly-fill']（不要把polly-fill刪除）,
    }

}