在vue-cli中如何将所有js以及css打包成一个js文件

Question

在vue-cli中如何将所有js以及css打包成一个js文件，如果做不到，如何将app.js manifest.js vendor.js打包成一个文件

Answer 1

这样的需求不是很合理啊。具体参考楼上回答。
但非要实现也可以。
1、再怎么样，我也建议提取css建议。不然等待JS加载完，才显示样式。用户明显可以看出样式缺失，然后才有样式。
提取使用的插件是用的extract-text-webpack-plugin。
2、从vue-cli @2.9.x版本的build/webpack.prod.conf.js 来看，会提取公共的JS代码到mainfest.js,vendor.js,vendor-async.js。如果不需要就注释即可。
刚好之前写了篇分析vue-cli构建的文章，分析vue-cli@2.9.3 搭建的webpack项目工程，附上一些代码和注释可供参考。

// 提取公共代码
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    // 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({
  // 把公共的部分放到 manifest 中
  name: 'manifest',
  // 传入 `Infinity` 会马上生成 公共chunk，但里面没有模块。
  minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
// 提取动态组件
new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  // 如果设置为 `true`，一个异步的  公共chunk 会作为 `options.name` 的子模块，和 `options.chunks` 的兄弟模块被创建。
  // 它会与 `options.chunks` 并行被加载。可以通过提供想要的字符串，而不是 `true` 来对输出的文件进行更换名称。
  async: 'vendor-async',
  // 如果设置为 `true`，所有  公共chunk 的子模块都会被选择
  children: true,
  // 最小3个，包含3，chunk的时候提取
  minChunks: 3
}),

Answer 2

为什么会有这样的需求？
如果是为了优化性能，这样做得不偿失，虽然减少url请求会有一定的性能优化，但这样会导致你每次修改代码会生成一个带有不同hash的js文件，这样的话浏览器的缓存作用会微乎其微
vue-cli 会把你的所有js打包成3个js，
app.js 自己写的代码
manifest.js 一个映射文件
vendor.js 你使用的库打包后的文件（jq、vue之类的）
使用这种方式自己更改代码后manifest.js、app.js会重新打包生成新的文件，vendor.js文件不会重新打包，这样vendor.js就会从缓存中读取