search

soundcloud / chunk-manifest-webpack-plugin

Allows exporting a manifest that maps entry chunk names to their output files, instead of keeping the mapping inside the webpack bootstrap.
MIT License
394 stars 73 forks source link

it get a useless json? #30

Open zzzgit opened 7 years ago

zzzgit commented 7 years ago

image

What I have got is as the above. Is it useful for webpack?

benasvip commented 7 years ago

@zzzgit Yes it is. Generated manifest.js will use chunks-manifest.json. You need to use CommonsChunkPlugin with ChunkManifestPlugin. Here is example:

const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
...
 entry: {
        react: ['react', 'react-dom'],
        main: './src/client/client.js'
    },
...
 new webpack.optimize.CommonsChunkPlugin({
        names: ['react', 'manifest'], // react libs + extracted manifest
        minChunks: Infinity
 }),
 new ChunkManifestPlugin({
        filename: 'chunks-manifest.json',
        manifestVariable: 'webpackManifest'
        })
...

If you want something like that:

  "manifest.js": "assets/js/manifest.d41d8cd9.js",
  "manifest.js.map": "assets/js/manifest.d41d8cd9.js.map",
  "react.js": "assets/js/react.78514de2.js",
  "react.js.map": "assets/js/react.78514de2.js.map"

Use webpack-manifest-plugin and do it like that for e.g.

const ManifestPlugin = require('webpack-manifest-plugin');
...
  new ManifestPlugin({
    fileName: 'assets-manifest.json'
  })
...

Remember I provided you only examples, they don't work if you paste them directly, if you need help try to read Webpack documentations about caching or you can ask me.

P.S. You can use this project react-boilerplate to see how to configure your app correctly or if you're working with React use it for yourself.