Hemanth.HM

A Computer Polyglot, CLI + WEB ♥'r.

Webpack: Bundle Unimported Assets

| Comments

If you reading this post, I assume that you are enough awareness of webpack, so I shall be directly diving into the code part of it.

Scenario:

Assume that there are few less file that you need to bundle along with webpack's output but those are not required or imported in any of your source/target files, below is simple trick in webpack config to bundle such files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const ExtractSass = {

  entry: glob_entries('./public/styles/external/*.less'),
      output: {
          filename: './.build/junk/[name].[chunkhash].js',
      },
      module: {
          loaders: [
              {
                  test: /\.less$/,
                  loader: ExtractTextPlugin.extract('isomorphic-style-loader','css-loader?modules&localIdentName=[name]_[local]','less-loader')
              },
          ]
      },
      plugins: [
          new ExtractTextPlugin('./.build/css/[name].css')
      ]
}

The entry attribute in webpack config bascialy handles, string, array and object:

  • If a string is passed it's resolved to a module which is loaded upon startup.

  • If an array is passed all modules are loaded upon startup and the last one is exported.

  • If an object is passed multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.

The above snippet has the following depencies:

/public/styles/external/*.less has those files that are not required in any of src files but needs to bundled, the trick bascially is to create js file for each those less files and then extract them to their respective css files to ./build/css/ path.

Sample output:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Child
    Hash: c1d6d83b3be5f8bb84ab
    Version: webpack 1.13.1
    Time: 3738ms

     Asset                                          Size        Chunks            Chunk Names
    ./.build/junk/Header.2fcd80b30e542a8a90e2.js    1.48 kB      1  [emitted]     Header
    ./.build/junk/Info.349ad333e96a6d35313f.js      1.47 kB      2  [emitted]     Info
    ./.build/junk/Section.a33bf0dc98964f4593b9.js   1.52 kB      4  [emitted]     Section

          ./.build/css/Header.css                   77 bytes     1  [emitted]     Header
          ./.build/css/Info.css                     96 bytes     2  [emitted]     Info
          ./.build/css/Section.css                  493 bytes    3  [emitted]     Section
        + 77 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules

This might be very rare scenario or a workaround for some server side rendering stuff, none the less, it's not all that hacky and looks neat?

Comments