webpack打包vue项目时，想html引入vue源码和业务代码分两个js，怎么实现

Question

项目里使用了vue,vue-resource，等等，打包的时候build.js居然有900多k，想把这些插件源码和我的业务代码分开加载，怎么实现。

刚开始以为是CommonsChunkPlugin就可以，但打包后发现两个文件都是900k，应该是没get对CommonsChunkPlugin使用方法，或理解错了CommonsChunkPlugin的含义。

想问问怎么才能实现html引入两个js，一个js是插件的源码，另一个是业务代码。
webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: {
    build: './src/main.js',
    vendor: ['vue','vue-resource']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
     new webpack.optimize.CommonsChunkPlugin({name:'vendor',  filename:'vendor.js'})
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'

import VueResource from 'vue-resource'
Vue.use(VueResource)

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Answer 1

可以参考 Vue-cli 的配置：https://github.com/vuejs-temp...

Answer 2

把vendor里面的vue改成vue/dist/vue.esm.js试试

Answer 3

vue-cli的配置是用commonChunkPlugin把node_modules里的模块都打包成vendor.js：

    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),

然后把其它静态资源（也包括js）一股脑复制到dist/static目录里，然后让你自己写<script>来加载。

我觉得这只适合于你用的库大部分都来自于npm模块的情况，像我就有很多用的第三方库都不是直接从npm来的。

我建议还是用commonChunk，但是手动指定那些模块（第三方库）需要打包进vendor.js，请看明确第三方库 chunk