使用Webpack构建SPA模式的多页面应用（基于Vue 2）

背景

Webpack构建后生成的包实在太大了，特别是大型项目，编译后得到一个庞然大物真是个恶梦。

那么问题来了，有解决办法吗？当然，我们可以指定一组文件（组件）生成到一个或者多个目录中去。

上代码。

指定组件目录

编辑webpack.base.conf.js文件，配置entry及output，代码如下：

module.exports = {
  entry: {
    'common': './src/components/Common.vue',
    'user-info': './src/components/UserInfo.vue',
    'order-info': './src/components/OrderInfo.vue'
  },
  output: {
    path: resolve('/static/'),
    filename: '[name].min.js',
  },
}

配置打包插件

编辑webpack.prod.conf.js文件，配置plugin，代码如下：

new HtmlWebpackPlugin({
  filename: 'order-info.html',
  template: 'order-info.html',
  chunks: ['common', 'order-info', ],
}),
new HtmlWebpackPlugin({
  filename: 'user-info.html',
  template: 'user-info.html',
  chunks: ['common', 'user-info', ],
})

执行构建

npm run build

这样，在dist目录里面就生成了两个文件。