soundcloud / chunk-manifest-webpack-plugin Goto Github PK

Hi,

There is something wrong with my setup or plugin.
Here is my webpack config: webpack.config.prod.js
My chunk-manifest.json contains only one entry:

{"1":"app-915536e5789438304214.js"}

And everything works even I don't provide webpackManifest global on the client.

I've noticed that this plugin doesn't support css and images. Any plans to add support for those asset types?

Could you run npm init to add repo-information and other missing stuff?

I'm wondering if it would be possible to use the filename instead of a numeric index for the manifest. This would might allow me to require the files by the same canonical name both in development and production.

So, instead of this:

{"1":"Search-d395af9d5105ea5a1e19.js","2":"App-d395af9d5105ea5a1e19.js"}

Maybe this?

{"Search.js":"Search-d395af9d5105ea5a1e19.js","App.js":"App-d395af9d5105ea5a1e19.js"}

Webpack v4 has been released.
At the moment only webpack version 3 is supported:

• https://github.com/soundcloud/chunk-manifest-webpack-plugin/blob/master/package.json#L15

Chunk {
  id: 1,
  ids: [ 1 ],
  debugId: 1002,
  name: 'profile', // by name
  _modules: 
   Set {

Config maybe

{
        filename: 'wmanifest.json',
        manifestVariable: 'webpackManifest',
        inlineManifest: true,
        keyChunk: 'name' // id default
    }

https://github.com/soundcloud/chunk-manifest-webpack-plugin/blob/master/lib/ChunkManifestPlugin.js#L29-L31
var keyChunk = this.keyChunk
c.id replace by c[keyChunk]
In constructor ChunkManifestPlugin add this.keyChunk = options.keyChunk || 'id';

Result of this operation
window.webpackManifest={"restaurantProfile":"restaurantProfile-1a19c34fddd34bea5d68.chunk.js"]

this will help in lazy loading of modules using pure js without dynamic import when we can not specify /* webpackChunkName: "name" */ comments in imports () if dynamic file name
or other situations

I think you understand me

Currently on master, I'm getting this error on webpack 2.2.1

ERROR in chunk bundle [entry]
[name].js
Chunk.entry was removed. Use hasRuntime()

ERROR in chunk markup [entry]
[name].js
Chunk.entry was removed. Use hasRuntime()
webpack: Failed to compile.

Looks like the error doesn't exist in release 1.1.0

related to e8e79f7?

Hello,

does it makes sense to use inlineManifest if I have this:

    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
      minChunks: Infinity
    }),
    new ChunkManifestPlugin({
      filename: 'chunks-manifest.json',
      manifestVariable: 'webpackManifest'
    }),

Or without inlineManifest it doesn't work correctly with html-webpack-plugin?

I've noticed the chunk manifest isn't updated when serving through webpack-dev-server. During development this would be sweet. I'm using [email protected] and [email protected].

I noticed this as I was looking into extending chunk-manifest-webpack-plugin to output a JS file, but the contents kept being on watch.

See https://github.com/soundcloud/chunk-manifest-webpack-plugin/blob/master/lib/ChunkManifestPlugin.js#L55
The _.replace() is called with just two parameters, which just returns the first one according to lodash's doc https://github.com/lodash/lodash/blob/d10b44bdef2b735865c493fbaec8687ec8998aef/replace.js.

Is there a reason for using _.replace like this? Why not just return "CHUNK_MANIFEST".

Add an example that shows why this plugin is helpful, and how it is used.

I'm receiving the following during npm install

• error UNMET PEER DEPENDENCY [email protected]
• warning npm WARN [email protected] requires a peer of webpack@^2.0.0 but none was installed.

// shortened for clarity
"devDependencies": {
    "chunk-manifest-webpack-plugin": "^1.0.0",
    "webpack": "2.2.0-rc.3"
}

I've tested the chunk manifest and it is working. I'm sure I'm missing something obvious causing the error.

Right now it's created in output.path but my setup requires it in other location. It would be nice to be able to define the path where it should be created and pass it as option.

I love using this plugin to keep my core chunk from changing anytime any of the child chunks change. However, I feel like there's a gap between easy plug-and-play:

1. This plugin writes the filenames/hashes to a json file and tells webpack to look for them in the global manifestVariable variable.
2. Webpack is built and looks for these files/hashes in the global manifestVariable variable.

...but we still have to manually attach the json to the global manifestVariable variable ourselves.

It'd be nice to have an option where instead of printing out the json to a .json file, it prints it out to .js file as:

window.<manifestVariable> = <parsedJSON>;

Then all we would need to do is attach the script tag or inline it. Would that make sense?

When I run npm run dev with my webpack.config.js,I see thoes error info:

ERROR in chunk manifest [entry]
js/[name]-[chunkhash].bundle.js
Chunk.entry was removed. Use hasRuntime()
Error: Chunk.entry was removed. Use hasRuntime()
    at Chunk.get entry [as entry] (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\Chunk.js:49:9)
    at registerChunk (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\chunk-manifest-webpack-plugin\lib\ChunkManifestPlugin.js:28:73)
    at Array.reduce (native)
    at registerChunk (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\chunk-manifest-webpack-plugin\lib\ChunkManifestPlugin.js:36:27)
    at Array.reduce (native)
    at MainTemplate.<anonymous> (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\chunk-manifest-webpack-plugin\lib\ChunkManifestPlugin.js:25:33)
    at MainTemplate.applyPluginsWaterfall (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\tapable\lib\Tapable.js:92:24)
    at MainTemplate.plugin (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\MainTemplate.js:106:31)
    at MainTemplate.applyPluginsWaterfall (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\tapable\lib\Tapable.js:92:24)
    at MainTemplate.render (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\MainTemplate.js:175:31)
    at Compilation.createChunkAssets (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\Compilation.js:1254:34)
    at sealPart2 (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\Compilation.js:629:10)
    at next (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\tapable\lib\Tapable.js:184:11)
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\extract-text-webpack-plugin\dist\index.js:241:13
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:421:16
    at iteratorCallback (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:998:13)
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:906:16
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\extract-text-webpack-plugin\dist\index.js:224:15
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:421:16
    at eachOfArrayLike (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:991:9)
    at eachOf (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:3145:5)
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\extract-text-webpack-plugin\dist\index.js:189:29
    at D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:3083:16
    at eachOfArrayLike (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:1003:9)
    at eachOf (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\async\dist\async.js:3145:5)
    at Compilation.<anonymous> (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\extract-text-webpack-plugin\dist\index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\tapable\lib\Tapable.js:188:13)
    at Compilation.seal (D:\CHUKUI\WORK\PROJECTS\MD-PRO02\node_modules\webpack\lib\Compilation.js:579:8)

And my project repo on there click here

Who can help me to resolve this?thanks.

When using chunk-manifest-webpack-plugin with CommonsChunkPlugin, it seems my manifest file is "leaking" into the common chunk's files. I'm including new ChunkManifestPlugin({filename: 'wpManifest.json'}) in my plugins, as well as

new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: ({resource}) => /node_modules/.test(resource)
    })

Looking in stats.compilation.chunks, I see that the vendor chunk now has the manifest listed in it!

// from console.log of parts of stats.compilation.chunks
foo [ 'fdc9b7b128.js', 'fdc9b7b128.js.map' ]
bar [ '2f10fcf981.js', '2f10fcf981.js.map' ]
app [ 'app-36a1f801d3.js', 'app-36a1f801d3.js.map' ]
vendor [ 'wpManifest.json',
  'vendor-8d40f60f58.js',
  'vendor-8d40f60f58.js.map' ]

Surely that shouldn't be there?

I was trying to use chunk-manifest-webpack-plugin to stop vendor.js hash change every time. In generated html, a script tag include manifest.json, but not vendor.js.Am I use this plugin in a wrong way.

template body:

<body>
    <div id="root"></div>
    
    <%= htmlWebpackPlugin.files.webpackManifest %>
  </body>

generated body:

<body>
    <div id="root"></div>
    
    <script>window.webpackManifest={"0":"js/0.bundle.33f32fc14a43e1de2c01.js"}</script>
  <script type="text/javascript" src="/manifest.json"></script><script type="text/javascript" src="/js/app.33f32fc14a43e1de2c01.js"></script></body>

webpack config:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'react-router', 'react-router-dom'],
    app: './src/index.js'
  },

  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: "js/[id].bundle.[chunkhash].js"
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: 'babel-loader'
      },

      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },

      {
        test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=512&&name=image/css/[name].[ext]?[hash]'
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(['dist'], {exclude: ['image']}),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),

    new ExtractTextPlugin({filename: 'style.[contenthash].css'}),

    new HtmlWebpackPlugin({
      template: './src/template.html',
      inject: 'body'
    }),

    new webpack.NamedModulesPlugin(),

    new ChunkManifestPlugin({
      filename: 'manifest.json',
      manifestVariable: 'webpackManifest',
      inlineManifest: true
    })

  ]

}

After updating to v1.1.1 my build fail with the following error :

ERROR in chunk manifest [entry]
[name].bundle.[chunkhash].js
Chunk.entry was removed. Use hasRuntime()
Child html-webpack-plugin for "index.html":
    [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
    [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
    [QS1q] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.ejs 941 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin ...

It's working with v1.1.0.
I'm using webpack v3.3.0.
Thanks

in my manifest json file i only got those js entries, is it possible to also include the compiled stylesheets?

The latest version of this package as of now is declared compatible with webpack 2 only.

To reuse the webpack's RawSource class, ChunkManifestPlugin depends on a webpack-core package which is generally missing from a webpack 2 setup (this is easily seen in an npm-shrinkwrap.json diff after chunk-manifest-webpack-plugin is installed).

webpack-core was marked as obsolete for webpack 2, and instead webpack-sources should be used to reuse the various *Source from webpack.

This is how webpack 2 itself uses it:
https://github.com/webpack/webpack/blob/028c51301733836abbedc88be7483af2623f5943/lib/RawModule.js#L9

const RawSource = require("webpack-sources").RawSource;

I'm inlining the manifest.js in html using the inline-manifest-webpack-plugin and other plugins. With v1.1.0 everything was working fine. But after I upgraded to v1.1.2 all I get in my html is this :

<script>{"0":"0.bundle.js","1":"1.bundle.js"}</script>

I'm not sure if this is an issue with chunk-manifest-webpack-plugin or with inline-manifest-webpack-plugin . But downgrading chunk-manifest-webpack-plugin to v1.1.0 solved my problem.

versions :
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Because there is a change in Chunk api, this plugin errors with webpack 2. There error is:

ERROR in chunk vendor [entry]
app-9148709000831c41a110.js
Chunk.entry was removed. Use hasRuntime()

I have a simple fix in a fork. I know webpack 2 is beta but would you accept a PR?

• DllPlugin manifests Dynamic Imports only.
• webpack-manifest-plugin usually manifests initial chunks (but can manifest dlls too)

What chunk-manifest-webpack-plugin exactly do?

Is there a way for the output json to have a map of module names to the file vs module ids as keys? Like the output of https://github.com/kossnocorp/assets-webpack-plugin?
i.e.

{
    a: 'a.[hash].js',
    b: 'b.[hash].js'
}

vs

{
    0: 'a.[hash].js',
    1: 'b.[hash].js'
}

It appears that something between 1.1.0 and 1.1.2 has changed the output from a .js file to a .json file. This is what appears in the htmlWebpackPlugin variable in each version:

1.1.0:

{
"files": {
	"publicPath": "/static/",
	"chunks": {
		"webpackManifest": {
			"size": 0,
			"entry": "/static/js/webpackManifest-d41d8cd98f00b204e980.js",
			"hash": "d41d8cd98f00b204e980",
			"css": []
		},
		"vendor": {
			"size": 2626754,
			"entry": "/static/js/vendor-392d99b5276c8459890d.js",
			"hash": "392d99b5276c8459890d",
			"css": [
				"/static/css/vendor-92e4a31a26173772f8ef.css"
			]
		},
		"main": {
			"size": 147201,
			"entry": "/static/js/main-819a8466ef5c6c51cd36.js",
			"hash": "819a8466ef5c6c51cd36",
			"css": [
				"/static/css/main-92e4a31a26173772f8ef.css"
			]
		}
	},
	"js": [
		"/static/js/webpackManifest-d41d8cd98f00b204e980.js",
		"/static/js/vendor-392d99b5276c8459890d.js",
		"/static/js/main-819a8466ef5c6c51cd36.js"
	],
	"css": [
		"/static/css/vendor-92e4a31a26173772f8ef.css",
		"/static/css/main-92e4a31a26173772f8ef.css"
	],
	"webpackManifest": ""
},
"options": {
	"template": "/projects/websites/quintro/node_modules/html-webpack-plugin/lib/loader.js!/projects/websites/quintro/server/views/index.template.ejs",
	"filename": "../server/views/index.hbs",
	"hash": false,
	"inject": false,
	"compile": true,
	"favicon": false,
	"minify": {
		"collapseBooleanAttributes": true,
		"collapseWhitespace": true
	},
	"cache": true,
	"showErrors": true,
	"chunks": "all",
	"excludeChunks": [],
	"title": "Quintro",
	"xhtml": false,
	"alwaysWriteToDisk": true,
	"staticContentURL": "https://localhost:7200"
}
}

1.1.2:

{
"files": {
	"publicPath": "/static/",
	"chunks": {
		"webpackManifest": {
			"size": 0,
			"entry": "/static/webpackManifest.json",
			"hash": "d41d8cd98f00b204e980",
			"css": []
		},
		"vendor": {
			"size": 2626754,
			"entry": "/static/js/vendor-392d99b5276c8459890d.js",
			"hash": "392d99b5276c8459890d",
			"css": [
				"/static/css/vendor-6946c2dfdd053e5b7448.css"
			]
		},
		"main": {
			"size": 147201,
			"entry": "/static/js/main-819a8466ef5c6c51cd36.js",
			"hash": "819a8466ef5c6c51cd36",
			"css": [
				"/static/css/main-6946c2dfdd053e5b7448.css"
			]
		}
	},
	"js": [
		"/static/webpackManifest.json",
		"/static/js/vendor-392d99b5276c8459890d.js",
		"/static/js/main-819a8466ef5c6c51cd36.js"
	],
	"css": [
		"/static/css/vendor-6946c2dfdd053e5b7448.css",
		"/static/css/main-6946c2dfdd053e5b7448.css"
	],
	"webpackManifest": ""
},
"options": {
	"template": "/projects/websites/quintro/node_modules/html-webpack-plugin/lib/loader.js!/projects/websites/quintro/server/views/index.template.ejs",
	"filename": "../server/views/index.hbs",
	"hash": false,
	"inject": false,
	"compile": true,
	"favicon": false,
	"minify": {
		"collapseBooleanAttributes": true,
		"collapseWhitespace": true
	},
	"cache": true,
	"showErrors": true,
	"chunks": "all",
	"excludeChunks": [],
	"title": "Quintro",
	"xhtml": false,
	"alwaysWriteToDisk": true,
	"staticContentURL": "https://localhost:7200"
}
}

Since I have a custom template for HTMLWebpackPlugin that iterates over the js files, this throws an error because it's trying to load a JSON file as a <script src> rather than a .js file.

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

This plugin works great, thanks for writing it.

I'm experiencing an issue where the contents of a commons chunk are now identical across compiles where the only code changed is not in the commons chunk, but the chunkHash webpack outputs for the commons chunk filename is still different.

Anyone else ever run into this?

Whenever I use the manifestVariable setting (like so: https://github.com/ismay/ismaywolff.nl/commit/abdb5274e129943f078af91e6a9f83974366f4b8) it leads to an error (see here), with webpack still expecting the manifest under the default name (window.webpackManifest).

This commit fixed the error above by reverting to the default settings, but according to your documentation it should be possible to change the variable name. Seems like a bug to me as this setting should work, or am I overlooking something here?

I have received this message during dependencies update:

warning "[email protected]" has incorrect peer dependency "webpack@^2.0.0 || ^2.1.0-beta || ^2.2.0-rc".

I've been using the plugin for the while and has worked without problems.

I don't know if there will be a push soon regarding this, but if not, I can prepare a PR.

I'll wait for comments.

Is there any partial reason why only entry chunks are removed? Shouldn't initial chunks be removed also?

          if(c.entry) {
            manifest[c.id] = undefined;

          if(c.entry || c.initial) {
            manifest[c.id] = undefined;

Right now, the code produces more rows in the manifest than can be used since the initial chunks aren't loaded async.

There is a high chance I don't understand somewhere here, please feel free to let me know what that is.