webpack常见分包具体配置

Webpack是一个强大的模块打包工具，常用于前端JavaScript应用的构建。它通过分析依赖关系，将项目模块打包成更小、更易于管理的文件。关于webpack的分包配置，主要有以下几个常见的步骤：

1. **安装插件**：
使用`webpack.optimize.CommonsChunkPlugin`或`webpack.optimize.LazyChunksWebpackPlugin`等插件来进行代码分割（chunking）。例如：

   const CommonsChunkPlugin = require('webpack').optimize.CommonsChunkPlugin;
   plugins: [
     new CommonsChunkPlugin({
       name: 'common', // 共享块名称
       filename: 'common.js', // 打包后的公共文件名
     }),
   ]

2. **拆分成入口点**：
根据路由或页面需求，创建多个entry（入口），如：

   module.exports = {
     entry: {
       app: './src/app.js',
       vendor: ['react', 'axios'], // 指定需要提取到单独文件的第三方库
     },
   };

3. **按需引入**：
使用`import()`语法动态导入或`require.ensure()`异步加载部分代码，避免一次性加载所有模块。

4. **优化懒加载**：
对于那些非首屏展示的内容，可以配置懒加载（code splitting），比如`async`函数或`dynamic imports`。

5. **runtime chunk**：
为了支持运行时代码分发，可以在生产环境生成一个独立的运行时脚本(`runtime chunk`)。