Posted in Uncategorized

Output.chunkFilename [name] not working?

   February 23, 2021  5 Comments on Output.chunkFilename [name] not working?

I’m not sure whether I’m correctly understanding output.chunkFilename‘s [name]. My assumption was that [name] would match [name] in output.filename.

Using vue-webpack-example: https://github.com/vuejs/vue-webpack-example

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    publicPath: "/build/",
    filename: "build.js"
  },
  module: {
    loaders: [
      { test: /\.styl$/, loader: "style!css!stylus" },
      { test: /\.html$/, loader: "html" }
    ]
  }
}

Creates the following files:

  • build.js
  • 1.build.js
  • 2.build.js

If I change option.filename to: build.[name].js

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    publicPath: "/build/",
    filename: "build.[name].js"
  },
  module: {
    loaders: [
      { test: /\.styl$/, loader: "style!css!stylus" },
      { test: /\.html$/, loader: "html" }
    ]
  }
}

Creates the following files:

  • build.main.js
  • 1.build.1.js
  • 2.build.2.js

Shouldn’t it create the following files?:

  • build.main.js
  • 1.build.main.js
  • 2.build.main.js

Setting [name] in output.chunkFilename always seems to become the [id]

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    publicPath: "/build/",
    chunkFilename: "[name].[id].js",
    filename: "build.[name].js"
  },
  module: {
    loaders: [
      { test: /\.styl$/, loader: "style!css!stylus" },
      { test: /\.html$/, loader: "html" }
    ]
  }
}

Creates the following files:

  • 1.1.js
  • 2.2.js
  • build.main.js

Is it working as intended? If so, in what condition(s) do the chunks become named?

Author: Fantashit

5 thoughts on “Output.chunkFilename [name] not working?”

  1. You are mistaking something.

    A chunk can be named.

    require(["jquery"], function($){
    // Something awesome with jQuery.
}, "jQueryStuff");

    Then, it would build bundle.jQueryStuff.js or jQueryStuff.bundle.js instead.

    A chunk without a name gets an incrementing ID.

  2. @tilleps The AMD ‘require’ does not allow you to name a chunk, so you need to use the commonjs option. ie change your code to this and you will not get the error

    require.ensure([], function(require){
    var $ = require(“jquery”) // you may need to add .default here
    // Something awesome with jQuery. $
    }, “jQueryStuff” // this will be passed webpack template under [name] and can be used with chunkFileName);

  3. I’m trying to deal with this right now and [name].[name].bundle.js gives me 0.chunk_name.bundle.js using @psimoneau22 suggestion

    Edit:
    Nevermind, using ChunkFilename as an argument to the output worked:

      output: {
    path: path.join(__dirname, 'public/dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/dist/',
    pathinfo: false
  },

    This results in:

                              Asset       Size  Chunks             Chunk Names
                 ChunkA.bundle.js  564 bytes       0  [emitted]  ChunkA
                 Chunkb.bundle.js  558 bytes       1  [emitted]  Chunkb
                   js.bundle.js    65.7 kB       2  [emitted]  js
               vendor.bundle.js     149 kB       3  [emitted]  vendor

    Whereas before I would get 0.Chunk1.bundle.js when using [name].[name].bundle.js as an argument to path in output

  4. Is chunkFilename a feature to be used only with code-splitting?

    Because I’m doing some tests with Webpack (not using code-splitting) and setting any value to chunkFilename doesn’t make a difference in my build output.

  5. i have chunckFilename in my webpack-config but still getting the number like name of bundling of both css chunks and js chunks???? what is going on???

Comments are closed.