const path = require('path');

module.exports = {
    mode: "production", // 打包环境: 为production会额外加入一些配置
    entry: './src/main.js', // 入口文件
    ouput: {
        path: path.resolve(__dirname, './build'),
        filename: 'bunde.js'
    }
}

const path = require('path');

module.exports = {
    mode: "production", // 打包环境: 为production会额外加入一些配置
    devtool: "source-map",
    entry: './src/main.js', // 入口文件
    ouput: {
        path: path.resolve(__dirname, './build'),
        filename: 'bunde.js'
    },
}

module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: {
                loader: "ts-loader"
            }
        }
    ],
}
,

devServer:{
    proxy: {
        '/api'
    :
        {
            target: 'http://localhost:9000',
                pathRewrite
        :
            {
                '^/api'
            :
                ''
            }
        ,
            changeOrigin: true
        }
    }
}
,

devServer:{
    proxy: {
        '/api'
    :
        {
            target: 'http://localhost:9000',
                pathRewrite
        :
            {
                '^/api'
            :
                ''
            }
        ,
            changeOrigin: true
        }
    }
,
    historyApiFallback: true
}
,

module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    devtool: false, // 是否需要source-map
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "[name]-bundle.js",
        // 重新打包时,先将之前打包的文件夹删除掉
        clean: true,
    },
};

// .about.js
const h1 = document.createElement('h1');
h1.textContent = 'About';
document.body.appendChild(h1);

// .category.js
const h2 = document.createElement('h2');
h2.textContent = 'Category';
document.body.appendChild(h2);

// main.js
const btn1 = document.createElement('button')
const btn2 = document.createElement('button')
btn1.textContent = 'about'
btn2.textContent = 'category'
document.body.appendChild(btn1)
document.body.appendChild(btn2)

btn1.onclick = () => {
    import('./router/about').then(res => {
        console.log(res);
    })
}

btn2.onclick = () => {
    import('./router/category').then(res => {
        console.log(res);
    })
}

// main.js

btn1.onclick = () => {
    import(/* webpackChunkName: "about"*/ './router/about').then(res => {
        res.default()
    })
}

btn2.onclick = () => {
    import(/* webpackChunkName: "category" */'./router/category').then(res => {
        console.log(res);
    })
}

// webpack.config.js
output: {
    path: path.resolve(__dirname, "./build"),
        filename
:
    "[name]-bundle.js",
        // 重新打包时,先将之前打包的文件夹删除掉
        clean
:
    true,
        chunkFilename
:
    '[name]_chunk.js'
}
,

// webpack.config.js
// key为我们在代码中导入的值
// value为cdn注册在全局变量的值
externals: {
    react: 'React',
        axios
:
    'axios',
        'react-dom'
:
    'ReactDOM'
}
,

// webpack config.js
const {ProvidePlugin} = require("webpack");
plugins: [
    new HtmlWebpackPlugin({
        template: "./index.html",
    }),
    new ProvidePlugin({
        React: "react",
        ReactDOM: "react-dom",
        axios: "axios",
        dayjs: "dayjs"
    }),
],

const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
console.log('使用dayjs获取最新值', now);

// webpack.config.js
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                "css-loader",
            ],
        },
    ],
}
,
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
    }),
],

optimization: {
    minimize: true,
        minimizer
:
    [
        new TerserPlugin({
            extractComments: false,
            terserOptions: {
                compress: {
                    arguments: true
                }
            }
        })
    ]
}

optimization: {
    minimize: true,
        minimizer
:
    [
        new TerserPlugin({
            extractComments: false,
            terserOptions: {
                compress: {
                    arguments: true
                }
            }
        }),
        new CSSMinimizerPlugin()
    ]
}

module.exports = {
    optimization: {
        usedExports: true,
    }
}

// package.json
{
    "sideEffects"
:
    false // tree-shaking所有
}

// 或者

{
    "sideEffects"
:
    [
        "*.css"
    ] // tree-shaking除去所有css
}

const glob = require('glob-all')
const path = require('path')
const PATHS = {
    src: path.join(__dirname, '../src')
}

console.log(PATHS.src);


new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
    safelist: function () {
        return {
            standard: ['body']
        }
    }
})

const webpack = require('webpack')


plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
]

new CompressionPlugin({
    test: /\.js$|\.css$/,
    // threshold: 10240,
    minRatio: 0.8,
    algorithm: 'gzip'
})

new HtmlWebpackPlugin({
    template: "./index.html",
    minify: isPro ? {
        removeComments: true, // 压缩时候移除注释
        collapseWhitespace: true, // 压缩时候移除空格
        removeAttributeQuotes: true, // 压缩时候移除属性的引号
        removeEmptyAttributes: true, // 压缩时候移除空属性
        removeRedundantAttributes: true, // 压缩时候移除多余属性
    } : false,
}),

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

const smp = new SpeedMeasurePlugin()


module.exports = function (env) {
    const isPro = env.production
    let mergeConfig = isPro ? prodConfig : devConfig
    const finalConfig = merge(getCommonConfig(isPro), mergeConfig)
    return smp.wrap(finalConfig)
}

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

plugins: [
    new BundleAnalyzerPlugin()
]