Feat/filename transform

[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 by providing chunkhash, contenthash, name, and id as arguments when a function is used for the filename option instead of a string.

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({
      filename: ({ 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

Most likely none

Additional Info

Improved some existing tests. Now testing filename and path generation.

[jsf-clabot]

All committers have signed the CLA.

[alexander-akait]

What is use case? Why it is need if you have output as Function in webpack?

[pgoforth]

What is use case? Why it is need if you have output as Function in webpack?

Exporting your CSS to a different subfolder based on the chunk.

[pgoforth]

Can't wait for this PR as the other one was stale

[alexander-akait]

@pgoforth
Why don't use https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json#L857?

[pgoforth]

@pgoforth
Why don't use https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json#L857?

@evilebottnawi
That handles the JS files nicely, and supports having a function as a callback. The MiniCSSExtractPlugin, however, currently does not support providing a function as a callback, therefore the CSS will be extracted and placed into the same directory as your JS file. Most times this is acceptable, however, if you have a desired folder structure like the following:

dist
│   
└───app1
│   │
│   └─  app1.js
│   └─  app1.css
│   
└───app2
│   │
│   └─  app2.js
│   └─  app2.css
│
└───cmn
│   └───css
│   │   │
│   │   └─  vendor.css
│   │
│   └───js
│   │   │
│   │   └─  vendor.js

...it is easy to get the vendor.js file to go into cmn/js, but the current MiniCSSExtractPlugin would generate the vendor.css file into the cmn/js directory. Not always desirable. If you set MiniCSSExtractPlugin:filename to be cmn/css you would get:

dist
│   
└───app1
│   │
│   └─  app1.js
│   
└───app2
│   │
│   └─  app2.js
│
└───cmn
│   └───css
│   │   │
│   │   └─  app1.css
│   │   └─  app2.css
│   │   └─  vendor.css
│   │
│   └───js
│   │   │
│   │   └─  vendor.js

...also, not desirable.

[TimothyBJacobs]

We need this functionality as well.

[kevinchappell]

What is use case? Why it is need if you have output as Function in webpack?

I tried this way but was unable to generate the files into their separate directories.

[kevinchappell]

Can someone have a look at why dependency_cache is failing? It does not look related to the pull request. I had a look at the logs and it seems ok until del-cli dist is called from npm run clean. This output is from the logs:

> mini-css-extract-plugin@0.4.5 clean /home/circleci/project
> del-cli dist

sh: /home/circleci/project/node_modules/.bin/del-cli: Permission denied
npm info lifecycle mini-css-extract-plugin@0.4.5~clean: Failed to exec clean script
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! mini-css-extract-plugin@0.4.5 clean: `del-cli dist`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the mini-css-extract-plugin@0.4.5 clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/circleci/.npm/_logs/2018-12-09T06_44_33_877Z-debug.log
npm info lifecycle mini-css-extract-plugin@0.4.5~prebuild: Failed to exec prebuild script
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! mini-css-extract-plugin@0.4.5 prebuild: `npm run clean`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the mini-css-extract-plugin@0.4.5 prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[domonique-ncino]

Can I help in anyway to get this pushed faster? I need this functionality badly.

[alexander-akait]

Need rebase and fix CI problem

[alexander-akait]

@kevinchappell need fix CI problem

[domonique-ncino]

I'm not familiar with webpack plugin development. If I can get pushed in the right direction to learn so this can get pushed would be great. This is a major need.

[kevinchappell]

Are anymore changes needed on this?