面试题：JavaScript打包工具之高级难度

Question

Webpack是常用的JavaScript打包工具，假设你需要对一个大型JavaScript项目进行性能优化打包，在处理复杂的模块依赖和不同类型资源（如图片、样式等）时，你会如何配置Webpack的loader和plugin？请说明思路及关键配置项。

Answer 1

思路

1. Loader配置思路：Loader用于处理不同类型资源，将其转换为Webpack能够处理的模块。对于JavaScript，使用babel-loader转译ES6+语法；对于样式，根据不同样式语言（如CSS、SCSS等）选择相应loader；对于图片，选择合适的loader进行处理。
2. Plugin配置思路：Plugin用于在Webpack构建流程的特定阶段执行自定义任务。如使用HtmlWebpackPlugin生成HTML文件，MiniCssExtractPlugin提取CSS到单独文件，OptimizeCSSAssetsPlugin压缩CSS，TerserPlugin压缩JavaScript等，以优化最终打包结果。

关键配置项

1. Loader配置：
   • JavaScript：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

- **CSS**：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'MiniCssExtractPlugin.loader',
                    'css-loader'
                ]
            }
        ]
    }
};

- **SCSS**：

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'MiniCssExtractPlugin.loader',
                    'css-loader',
                  'sass-loader'
                ]
            }
        ]
    }
};

- **图片**：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

2. Plugin配置：
   • HtmlWebpackPlugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

- **MiniCssExtractPlugin**：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename:'styles.css'
        })
    ]
};

- **OptimizeCSSAssetsPlugin**：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})
        ]
    }
};

- **TerserPlugin**：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({})
        ]
    }
};