support webpack 5.x

[githoniel]

this PR will make webpack-chain work with webpack5 #266

I have checked the documentation for all supported options.

• Class: use CreateClass(superClass) to support chained class inherited
• Configuration: support almost all options in webpack5 and remove undocumented options.
  • partial support Module Contexts options. since they are document as deprecated and will soon be removed, so only parameters that the demo is provided in the documentation are supported
  • add new type ChainedValueMap to support object/boolean type for node/performance option as #252 suggested, API like config.node(false).
  • add tests for new config
• Type declaration: use the type definition that comes with webpack itself
• CI: change to use Github Actions
• Doc: readme has updated

[githoniel]

@edmorley I have no idea how to deal with Travis CI, any idea?

[edmorley]

@githoniel Thank you for the PR!

I have no idea how to deal with Travis CI, any idea?

Unfortunately there are no more Travis CI credits, so this repo needs to be migrated to eg GitHub actions: https://github.com/neutrinojs/webpack-chain/issues/266#issuecomment-808191327

Such a migration is a blocker for merging any other PRs.

[githoniel]

I have finished CI migration, update type definition and readme.

Github actions did not trigger on this PR but it work well in my fork. check https://github.com/githoniel/webpack-chain/actions

I think it will work in this project on PR after merge.

@edmorley

[edmorley]

Btw I've just renamed the master branch to main. GitHub gives these instructions for updating local repos:

git branch -m master main
git fetch origin
git branch -u origin/main main

[githoniel]

@edmorley I have create https://github.com/neutrinojs/webpack-chain/pull/304

[githoniel]

conflict resolved and all test pass now

[githoniel]

@edmorley do you have time to review this?

my fork version @gem-mine/webpack-chain of this pr has been used in our private cli and work well

[wonderfulMan]

@edmorley do you have time to review this?

my fork version @gem-mine/webpack-chain of this pr has been used in our private cli and work well

I finally found that it supports version 5.0, you helped my work Good luck！

[jaxonly]

There are still some problems with the splitChunks type support .

        config
            .optimization
                .splitChunks({
                    name: false,
                    chunks: 'all',
                }) // WebStorm prompts to return Optimization
                .end() // WebStorm prompts to return Config;

In fact, you need one more end to return Config

[githoniel]

@JaxXu thanks for testing. I have fixed it

[jaxonly]

@JaxXu thanks for testing. I have fixed it

Great, now it works very well in my project . Thank you for your work!

[0x1af2aec8f957]

@githoniel Can webpack-dev-server be upgraded to v4 together？ I noticed this remark: https://github.com/githoniel/webpack-chain/blob/bdbdb85c4338200ef9fbd8108d5709431a6f8cae/types/index.d.ts#L245-L246

The complete migration plan is here: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

[githoniel]

@githoniel Can webpack-dev-server be upgraded to v4 together？ I noticed this remark: https://github.com/githoniel/webpack-chain/blob/bdbdb85c4338200ef9fbd8108d5709431a6f8cae/types/index.d.ts#L245-L246

The complete migration plan is here: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

thank you for remind me, I will fix this soon

[0x1af2aec8f957]

@githoniel I see the update. Thank you for your work.

[0x1af2aec8f957]

@githoniel I found a new problem：

webpack-chain config:

config
    .mode(ENV)
    .cache(true)
    .name(packageInfo.name)
    .stats({
        assets: false,
        modules: false,
        runtimeModules: false,
        cachedModules: false,
        assetsSort: '!size'
    })
    .devtool(isDevelopment ? 'eval-source-map' : false) /// doc: https://webpack.js.org/configuration/devtool/#devtool
    .entry('main')
      .add(path.resolve(workDir, 'src', 'main.ts'))
    .end()
    .output
      .clean(true)
      .path(path.resolve(workDir, projectName))
      .filename(isDevelopment ? 'js/[name].js' : 'js/[name].[chunkhash:8].js')
      .assetModuleFilenamet(isDevelopment ? 'asset/[name].[ext]' : 'asset/[name].[contenthash:8].[ext][query]') /// doc: https://webpack.js.org/configuration/output/#outputassetmodulefilename
      .publicPath(publicPath)
    .end();

webpack-chain error:

[webpack-cli] Failed to load '/tmp/webpack.base.ts' config
[webpack-cli] TypeError: config.mode(...).cache(...).name(...).stats(...).devtool(...).entry(...).add(...).end(...).output.clean(...).path(...).filename(...).assetModuleFilenamet is not a function

I noticed the definition of types in the code: Type definition：https://github.com/githoniel/webpack-chain/blob/9b1f73cead509ca63fd65b70016107bea4202ffa/types/index.d.ts#L207 Actual code：https://github.com/githoniel/webpack-chain/blob/9b1f73cead509ca63fd65b70016107bea4202ffa/src/Output.js#L20

Why not use assetmodulefilename for the type definition here? Is it due to a writing error?

[githoniel]

@0x1af2aec8f957 It should be assetModuleFilename not assetModuleFilenamet ?

[0x1af2aec8f957]

@0x1af2aec8f957 It should be assetModuleFilename not assetModuleFilenamet ?

yes

[0x1af2aec8f957]

@githoniel A new type inference problem was found：https://github.com/webpack-contrib/terser-webpack-plugin/issues/443#issuecomment-915086408

[githoniel]

Hi! Thank you for your work on this, and sorry for the delay in taking a look at it.

The PR is pretty large at the moment (+2,717 −3,358) and contains several different types of changes, which makes it harder to review.

Would it be possible to split as many changes out of the PR as possible that aren't directly related to webpack 5? For example these should be separate PRs:

• Dropping support for Node 10
• Adding a new ChainedValueMap concept (not sure I follow why this is needed? The PR description in a new PR would help me understand this)
• Refactoring webpack-chain base classes (such as the new src/createClass/* additions)
• The sorting some of the existing properties/keys or sections README sections alphabetically

Many thanks :-)

I will split this later

[edmorley]

Would it be possible to split as many changes out of the PR as possible that aren't directly related to webpack 5? For example these should be separate PRs:

* Dropping support for Node 10

I've now done this in #318. I've also bumped the version on main to v7, since main now contains breaking changes.

Please could new PRs be created for these:

* Adding a new ChainedValueMap concept (not sure I follow why this is needed? The PR description in a new PR would help me understand this)
* Refactoring webpack-chain base classes (such as the new `src/createClass/*` additions)
* The sorting some of the existing properties/keys or sections README sections alphabetically

And just to emphasises - I don't have the time to work on this project myself (I'm not using webpack or doing much front-end any more), so people other than me will need to drive this work. Thank you for everyone's help so far! :-)

[denghongcai]

any progress here?

[Nic128]

This PR has been published under https://www.npmjs.com/package/@gem-mine/webpack-chain before the requests here for change. I have been using that fork publish for my own private webpack 5 neutrino fork. I have not had much issues, at least for my usage.

The work involved here is to split the many changes into consumable bits. Makes for better changelogs and better reviews. As far as I know, no one has started the asked split.

[CoreyBin]

Hi, how long does it take to upgrade?

[suanmei]

Thanks for your work firstly. There is a question about the Type Definition when I use config.devtool('eval-cheap-module-source-map').

Webpack5's sourceMap named-style is ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

[lindelleric]

Thanks for your work! Is there any ambition to finish this PR?

[AdvancedCat]

Hi, it's already year 2023 and I can't wait to use this new feature in webpack5. So, how is the progress going with that?

[imaegoo]

Hi, it's already year 2023 and I can't wait to use this new feature in webpack5. So, how is the progress going with that?

@AdvancedCat An easy way is: yarn remove webpack-chain && yarn add -D @gem-mine/webpack-chain

[edmorley]

Closing since this project is no longer maintained: https://github.com/neutrinojs/webpack-chain/issues/358