面试题：Webpack在处理复杂前端架构时的应用策略

模块管理

入口(entry)配置：通过entry指定应用的入口文件，通常是一个JavaScript文件，Webpack以此为起点开始构建依赖图。例如：

module.exports = {
    entry: './src/index.js'
};

解析(resolve)规则：配置resolve来告诉Webpack如何寻找模块。可以设置别名(alias)，方便引用模块，减少相对路径的复杂性。例如：

module.exports = {
    resolve: {
        alias: {
            '@components': path.resolve(__dirname,'src/components')
        }
    }
};

这样在代码中就可以使用import MyComponent from '@components/MyComponent';来引入组件。 3. 模块加载器(loader)：使用各种loader处理不同类型的文件，如babel-loader处理ES6+代码转换为ES5，css-loader和style-loader处理CSS文件等。例如：

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

打包优化

代码分割(code splitting)：
- splitChunks插件：利用splitChunks进行公共代码提取。Webpack4+默认配置已经对node_modules中的模块进行了自动提取。可以进一步配置，例如提取多个入口之间的公共代码：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

- **动态导入(dynamic imports)**：使用`import()`语法实现按需加载，只有在需要时才加载模块。例如：

button.addEventListener('click', () => {
    import('./module.js').then(module => {
        module.doSomething();
    });
});

压缩与优化：
- TerserPlugin：Webpack默认使用TerserPlugin来压缩JavaScript代码，去除未使用的代码（tree - shaking）。可以在optimization.minimizer中进一步配置，例如启用并行压缩：

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true
            })
        ]
    }
};

- **其他优化**：使用`OptimizeCSSAssetsPlugin`压缩CSS，`image-webpack-loader`压缩图片等。

解决依赖冲突

版本锁定：在package.json中明确指定依赖的版本，避免不同模块依赖同一库的不同版本。同时可以使用npm shrinkwrap（npm v3之前）或yarn.lock（yarn）文件来锁定所有依赖的版本。
别名处理：对于一些无法避免的依赖冲突，可以使用resolve.alias将不同模块依赖的同一库指向同一个版本。例如，如果模块A依赖lodash@1.0，模块B依赖lodash@2.0，可以通过别名让它们都使用lodash@2.0：

module.exports = {
    resolve: {
        alias: {
            'lodash': path.resolve(__dirname, 'node_modules/lodash@2.0')
        }
    }
};

Webpack支持复杂前端架构开发的特性

插件系统(plugin system)：Webpack拥有丰富的插件，如HtmlWebpackPlugin生成HTML文件并自动注入打包后的脚本，CleanWebpackPlugin在打包前清理输出目录等，方便进行各种构建过程的定制。
热模块替换(Hot Module Replacement, HMR)：在应用运行过程中，无需刷新整个页面就可以替换、添加或删除模块，大大提高开发效率，尤其适用于大型单页应用的开发调试。
支持多种模块类型：不仅支持JavaScript模块，还能处理CSS、SCSS、LESS、图片、字体等各种类型的文件，方便管理复杂前端架构中的各种资源。
代码拆分与懒加载：如上述提到的splitChunks和动态导入，能够有效管理应用的加载体积和加载时机，优化用户体验。

星途面试题库

面试题：Webpack在处理复杂前端架构时的应用策略

知识考点

面试题答案

模块管理

打包优化

解决依赖冲突

Webpack支持复杂前端架构开发的特性