vue 打包 输出公共js加载文件

Vue 打包输出公共 JS 加载文件可以通过配置 `webpack` 实现。

首先，在 `webpack.base.conf.js` 中添加 `CommonsChunkPlugin` 插件，将公共的代码提取到一个 `vendor` chunk 中：

const webpack = require('webpack')

module.exports = {
  // ...其他配置
  plugins: [
    // 提取公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // 任何引用 node_modules 中的模块都被视为外部模块
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    })
  ]
}

然后，在 `webpack.prod.conf.js` 中，使用 `HtmlWebpackPlugin` 插件将 `vendor` chunk 添加到生成的 HTML 文件中：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...其他配置
  plugins: [
    // 生成 HTML 文件，并注入静态资源
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      chunksSortMode: 'dependency'
    })
  ]
}

其中 `chunksSortMode` 选项指定 chunk 的排序方式，`'dependency'` 表示按依赖关系排序，这样可以确保 `vendor` chunk 在其他 chunk 之前加载。

最后，打包生成的静态资源文件中，将会有一个名为 `vendor.js` 的文件，它包含了所有来自 `node_modules` 目录下的第三方依赖库。在 HTML 文件中添加：

<script src="static/js/vendor.js"></script>

即可加载这个公共的 JS 加载文件。