How to package all js and css into a js file in vue-cli

how to package all js and css into a js file in vue-cli, and if not, how to package app.js manifest.js vendor.js into a file

Mar.20,2021

Why is there such a need?
if it is to optimize performance, the loss outweighs the gain. Although there will be some performance optimization in reducing url requests, this will cause you to generate a js file with a different hash each time you modify the code. In this way, the browser's caching effect will be minimal.
vue-cli will package all your js into 3 js,.
Code written by app.js
manifest.js A mapping file
vendor.js the packaged file of the library you use (jq, vue, etc.)
after you change the code in this way, manifest.js and app.js will be repackaged to generate a new file, and the vendor.js file will not be repackaged, so that vendor.js will read


from the cache.

this kind of demand is not very reasonable. Refer to the answer upstairs for details.
but it has to be implemented.
1. No matter what, I also suggest extracting css suggestions. Otherwise, wait for JS to finish loading before displaying the style. The user can clearly see that the style is missing before there is a style. The plug-in used for
extraction is extract-text-webpack-plugin .
2. From the build/webpack.prod.conf.js version of vue-cli @ 2.9.x , the common JS code is extracted to mainfest.js , vendor.js , vendor-async.js . Just comment if you don't need it.
just wrote an article analyzing vue-cli builds , analyzing the webpack project project built by vue-cli@2.9.3 , with some code and comments for reference.

// 
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/-sharpextra-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,
  // 33chunk
  minChunks: 3
}),
Menu