import chalk from 'chalk' ; import webpack from 'webpack' ; import ProgressBarPlugin from 'progress-bar-webpack-plugin' ; import { webpackExternalForArco } from '@arco-design/arco-dev-utils' ; import tscConfig from '../tsc.config' ; import babelConfig from '../babel.config' ; import { BUILD_ENV_DIST_FILENAME_JS , BUILD_ENV_MODE , CWD , DIR_NAME_COMPONENT_LIBRARY , DIR_NAME_UMD , } from '../../constant' ; import getConfigProcessor from '../../scripts/utils/getConfigProcessor' ; const { name : packageName , version } = require ( `${ CWD }/package.json` ) ; const packageNameWithoutScope = packageName . replace ( /^@[^\/]+\// , '' ) ; const lessRegex = /\.less$/ ; const lessModuleRegex = /\.module\.less$/ ; function getUse ( cssModule ) { const options = cssModule ? { modules : { localIdentName : '[local]-[hash:10]' , } , } : { } ; return [ { loader : 'style-loader' , } , { loader : 'css-loader' , options , } , { loader : 'less-loader' , options : { javascriptEnabled : true , } , } , ] ; } function getTSLoaderOptions ( ) { const options = { compilerOptions : { ... tscConfig } , } ; if ( tscConfig . project ) { options . configFile = tscConfig . project ; } return options ; } let config = { mode : 'production' , entry : { arco : `${ CWD }/${ DIR_NAME_COMPONENT_LIBRARY }/index.tsx` , } , output : { path : `${ CWD }/${ DIR_NAME_UMD }` , publicPath : `https://unpkg.com/${ packageName }@latest/${ DIR_NAME_UMD }/` , filename : '[name].min.js' , library : '[name]' , libraryTarget : 'umd' , } , module : { rules : [ { test : /\.tsx?$/ , exclude : /node_modules/ , use : [ { loader : 'babel-loader' , options : babelConfig , } , { loader : 'ts-loader' , options : getTSLoaderOptions ( ) , } , ] , } , { test : lessRegex , exclude : lessModuleRegex , use : getUse ( false ) , } , { test : /\.css$/ , sideEffects : true , use : [ { loader : 'style-loader' , } , { loader : 'css-loader' , } , ] , } , { test : /\.(png|jpg|gif|ttf|eot|woff|woff2)$/ , loader : 'file-loader' , options : { esModule : false , } , } , { test : /\.svg$/ , use : [ '@svgr/webpack' ] , } , { test : lessModuleRegex , use : getUse ( true ) , } , ] , } , externals : [ { react : { root : 'React' , commonjs2 : 'react' , commonjs : 'react' , amd : 'react' , } , 'react-dom' : { root : 'ReactDOM' , commonjs2 : 'react-dom' , commonjs : 'react-dom' , amd : 'react-dom' , } , } , webpackExternalForArco , ] , resolve : { modules : [ 'node_modules' ] , extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' ] , } , resolveLoader : { modules : [ 'node_modules/@arco-design/arco-scripts/node_modules' , 'node_modules' ] , } , plugins : [ new ProgressBarPlugin ( { format : `[arco-scripts]: [:bar] ${ chalk . green . bold ( ':percent' ) } (:elapsed seconds)` , } ) , new webpack . BannerPlugin ( { banner : `${ packageNameWithoutScope } v${ version }\n\nCopyright 2019-present, Bytedance, Inc.\nAll rights reserved.\n` , } ) , ] , } ; const processor = getConfigProcessor < Function | { component : Function ; } > ( 'webpack' ) ; const realProcessor = typeof processor === 'function' ? processor : processor && processor . component ? processor . component : null ; if ( realProcessor ) { config = realProcessor ( config ) || config ; } if ( typeof config . entry === 'string' ) { config . entry = { arco : config . entry , } ; } if ( BUILD_ENV_MODE ) { config . mode = BUILD_ENV_MODE ; } if ( BUILD_ENV_DIST_FILENAME_JS ) { config . output . filename = BUILD_ENV_DIST_FILENAME_JS ; } export default config ;