import { createBabelChain } from '@modern-js/babel-chain' ; import { IAppContext , NormalizedConfig } from '@modern-js/core' ; import { applyOptionsChain , isUseSSRBundle , removeLeadingSlash , } from '@modern-js/utils' ; import { ClientWebpackConfig } from './client' ; class ModernWebpackConfig extends ClientWebpackConfig { constructor ( appContext , options ) { super ( appContext , options ) ; this . htmlFilename = ( name ) => removeLeadingSlash ( `${ this . options . output . htmlPath ! }/${ this . options . output . disableHtmlFolder ? `${ name }-es6` : `${ name }/index-es6` }.html` ) ; this . jsChunkname = this . jsChunkname . replace ( /\.js$/ , '-es6.js' ) ; this . jsFilename = this . jsFilename . replace ( /\.js$/ , '-es6.js' ) ; this . babelChain = createBabelChain ( ) ; } name ( ) { this . chain . name ( 'modern' ) ; } plugins ( ) { super . plugins ( ) ; if ( this . options . cliOptions ?. analyze ) { this . chain . plugin ( 'bundle-analyze' ) . tap ( ( ) => [ { analyzerMode : 'static' , openAnalyzer : false , reportFilename : 'report-modern.html' , } , ] ) ; } } loaders ( ) { const loaders = super . loaders ( ) ; const babelOptions = loaders . oneOf ( 'js' ) . use ( 'babel' ) . get ( 'options' ) ; loaders . oneOf ( 'js' ) . use ( 'babel' ) . options ( { ... babelOptions , presets : [ [ require . resolve ( '@modern-js/babel-preset-app' ) , { appDirectory : this . appDirectory , target : 'client' , useLegacyDecorators : ! this . options . output ?. enableLatestDecorators , useBuiltIns : false , useModern : true , chain : this . babelChain , styledCompontents : applyOptionsChain ( { pure : true , displayName : true , ssr : isUseSSRBundle ( this . options ) , transpileTemplateLiterals : true , } , ( this . options . tools as any ) ?. styledComponents ) , } , ] , ] , } ) ; return loaders ; } } export { ModernWebpackConfig } ;