feat(options): add moduleFilename option

[kevinchappell]

This PR contains a:

• bugfix
• new feature
• code refactor
• test update
• typo fix
• metadata update

Motivation / Use-Case

The filename option currently takes a string the enables devs to customize the filename of the generated css file. This works well and the customized filename is created in the same output directory as the js file it is extracted from, however there are cases when the generated files may need to be in different directories. This change enables modifying the filenameTemplate using chunk data.

Use Case:

webpack.config.js - entry

  entry: {
    'dist/main': 'src/index.js',
    'demo/assets/js/demo': 'src/demo/index.js',
  }

The above config will create dist/main.js and demo/assets/js/demo.js.

Use:

webpack.config.js - plugins

  plugins: [
    new MiniCssExtractPlugin({
      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.min.css`,
    })
  ]

We can change the output directory, chunkhash length and more by using a function that gets called during compilation.mainTemplate.hooks.renderManifest.

Breaking Changes

None

Additional Info

[codecov]

Codecov Report

Merging #381 into master will increase coverage by 0.25%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #381      +/-   ##
==========================================
+ Coverage   64.93%   65.19%   +0.25%     
==========================================
  Files           4        4              
  Lines         405      408       +3     
  Branches       82       83       +1     
==========================================
+ Hits          263      266       +3     
  Misses        118      118              
  Partials       24       24

Impacted Files	Coverage Δ
src/index.js	87.96% <100%> (+0.16%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b0a0355...d215aee. Read the comment docs.

[alexander-akait]

Can you rebase, thanks for PR, good work!

[kevinchappell]

Can you rebase, thanks for PR, good work!

done

[ghostflow]

when will this pr be merged?
need this feature~

[ifeltsweet]

This doesn't work on chunks that are split out with SplitChunksPlugin – only works for entries. But our team found that chunkFilename can actually be a function, so this works:

new MiniCssExtractPlugin({
    chunkFilename: ({ chunk }) => {
        if (chunk.entryModule) {
            // extracted from entry
            return '[name].[contenthash].css';
        } else {
            // extracted from split chunks
            return 'common/css/[name].[contenthash].css'
        }
    },
})