TypeScript webpack-merge類代碼示例

import * as webpack from 'webpack'
import * as merge from 'webpack-merge'
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
const MinifyPlugin = require('babel-minify-webpack-plugin')

const config: webpack.Configuration = {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [new MinifyPlugin()],
  },
}

const mainConfig = merge({}, common.main, config)
const askPassConfig = merge({}, common.askPass, config)
const cliConfig = merge({}, common.cli, config)
const highlighterConfig = merge({}, common.highlighter, config)

const rendererConfig = merge({}, common.renderer, config, {
  module: {
    rules: [
      // This will cause the compiled CSS to be output to a
      // styles.css and a <link rel="stylesheet"> tag to be
      // appended to the index.html HEAD at compile time
      {
        test: /\.(scss|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],

const patchCustomConfig = (
  baseConfig: webpack.Configuration,
  buildConfig: Types.BuildConfig
): webpack.Configuration => {
  const customWebpackConfig = buildConfig.webpack || {}
  let webpackConf
  if (typeof customWebpackConfig === 'function') {
    webpackConf = customWebpackConfig(baseConfig, webpack)
  } else {
    webpackConf = webpackMerge(baseConfig, customWebpackConfig)
  }

  const constantConfig = buildConfig.defineConstants || {}
  const envConfig = {}
  for (const [envKey, envValue] of Object.entries(buildConfig.env || {})) {
    envConfig[`process.env.${envKey}`] = envValue
  }
  const definePluginConfig = Object.assign({}, envConfig, constantConfig)
  return webpackMerge(webpackConf, {
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.join(appPath, buildConfig.sourceRoot, 'index.html')
      }),
      new webpack.DefinePlugin(definePluginConfig)
    ]
  })
}

 generateConfig(): void {
   switch (this.target) {
     case "development":
       this.config = webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial);
       break;
     case "production":
       this.config = webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial);
       break;
     default:
       throw new Error("Invalid build target. Only 'development' and 'production' are available.");
       break;
   }
 }

const deprecatedCustomizeConfig = deprecate((baseConfig, customConfig) => {
  if (customConfig instanceof Function) {
    return customConfig(baseConfig, webpack)
  } else if (customConfig instanceof Object) {
    return webpackMerge({}, baseConfig, customConfig)
  }
}, chalk.yellow(`h5.webpack配置项即将停止支持，请尽快迁移到新配置项。新配置项文档：https://nervjs.github.io/taro/docs/config-detail.html#h5`))

const buildProd = (config: BuildConfig): void => {
  const conf = Object.assign({}, buildConf, config)
  const baseWebpackConf = webpackMerge(baseConf(conf), prodConf(conf), {
    entry: conf.entry,
    output: {
      path: path.join(appPath, conf.outputRoot),
      filename: 'js/[name].js',
      publicPath: conf.publicPath
    }
  })
  const webpackConf = patchCustomConfig(baseWebpackConf, conf)
  const compiler = webpack(webpackConf)
  console.log()
  getServeSpinner().text = 'Compiling...'
  getServeSpinner().start()

  compiler.run((err, stats) => {
    if (err) {
      return printBuildError(err)
    }

    const { errors, warnings } = formatWebpackMessage(stats.toJson({}))
    const isSuccess = !errors.length && !warnings.length
    if (isSuccess) {
      getServeSpinner().stopAndPersist({
        symbol: '✅ ',
        text: chalk.green('Compile successfully!\n')
      })
      return process.stdout.write(
        stats.toString({
          colors: true,
          modules: false,
          children: false,
          chunks: false,
          chunkModules: false
        }) + '\n'
      )
    }
    if (errors.length) {
      errors.splice(1)
      getServeSpinner().stopAndPersist({
        symbol: '🙅  ',
        text: chalk.red('Compile failed!\n')
      })
      return printBuildError(new Error(errors.join('\n\n')))
    }
    if (warnings.length) {
      getServeSpinner().stopAndPersist({
        symbol: '⚠️  ',
        text: chalk.yellow('Compile completes with warnings.\n')
      })
      console.log(warnings.join('\n\n'))
      console.log('\nSearch for the ' + chalk.underline(chalk.yellow('keywords')) + ' to learn more about each warning.')
      console.log('To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n')
    }
  })
}

  constructor(public ngCliProject: any, public target: string, public environment: string, outputDir?: string) {
    const appConfig = CliConfig.fromProject().apps[0];

    appConfig.outDir = outputDir || appConfig.outDir; 

    this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, environment, appConfig);
    this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, appConfig);
    this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, appConfig);

    if (CliConfig.fromProject().apps[0].mobile){
      this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackBaseConfig = webpackMerge(this.webpackBaseConfig, this.webpackMobileConfigPartial);
      this.webpackProdConfigPartial = webpackMerge(this.webpackProdConfigPartial, this.webpackMobileProdConfigPartial);
    }

    this.generateConfig();
  }

  constructor(public ngCliProject: any, public target: string, public environment: string) {
    const sourceDir = CliConfig.fromProject().defaults.sourceDir;

    const environmentPath = `./${sourceDir}/app/environments/environment.${environment}.ts`;

    this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir);
    this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir);
    this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir);

    if (CliConfig.fromProject().apps[0].mobile){
      this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir);
      this.webpackMobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root, sourceDir);
      this.webpackBaseConfig = webpackMerge(this.webpackBaseConfig, this.webpackMobileConfigPartial);
      this.webpackProdConfigPartial = webpackMerge(this.webpackProdConfigPartial, this.webpackMobileProdConfigPartial);
    }

    this.generateConfig();
    this.config.plugins.unshift(new NgCliEnvironmentPlugin({
      path: path.resolve(this.ngCliProject.root, `./${sourceDir}/app/environments/`),
      src: 'environment.ts',
      dest: `environment.${this.environment}.ts`
    }));
  }

const buildDev = (config: BuildConfig): void => {
  const conf = Object.assign({}, buildConf, config)
  const publicPath = conf.publicPath
  const contentBase = path.join(appPath, conf.outputRoot)
  const customDevServerOptions = config.devServer || {}
  const https = 'https' in customDevServerOptions ? customDevServerOptions.https : conf.protocol === 'https'
  const host = customDevServerOptions.host || conf.host
  const port = customDevServerOptions.port || conf.port
  const urls = prepareUrls(https ? 'https' : 'http', host, port)

  const baseWebpackConf = webpackMerge(baseConf(conf), devConf(conf), {
    entry: conf.entry,
    output: {
      path: contentBase,
      filename: 'js/[name].js',
      publicPath
    }
  })

  const webpackConf = patchCustomConfig(baseWebpackConf, conf)
  const baseDevServerOptions = devServerConf({
    publicPath,
    contentBase,
    https,
    host,
    publicUrl: urls.lanUrlForConfig
  })
  const devServerOptions = Object.assign({}, baseDevServerOptions, customDevServerOptions)
  WebpackDevServer.addDevServerEntrypoints(webpackConf, devServerOptions)
  const compiler = createCompiler(webpackConf)
  compiler.hooks.done.tap('taroDoneFirst', stats => {
    if (isFirst) {
      isFirst = false
      getServeSpinner().clear()
      console.log()
      console.log(chalk.cyan(`ℹ️  Listening at ${urls.lanUrlForTerminal}`))
      console.log(chalk.cyan(`ℹ️  Listening at ${urls.localUrlForBrowser}`))
      console.log(chalk.gray('\n监听文件修改中...\n'))
    }
  })
  const server = new WebpackDevServer(compiler, devServerOptions)
  console.log()
  getServeSpinner().text = 'Compiling...'
  getServeSpinner().start()

  server.listen(port, host, err => {
    if (err) return console.log(err)
    opn(urls.localUrlForBrowser)
  })
}

 public async start() {
   const config = require('../fixtures/webpack.config.js');
   console.log("Starting webpack-serve");
   this._server = await serve({}, {
     config: merge(config, {
       serve: {
         port: 9010,
         open: false,
         clipboard: false,
         hotClient: false,
         logLevel: 'warn',
       },
     }),
   });
 }

module.exports = (env: any) => {
    const prod = isProd(env);
    const aot = isAOT(env);
    if (!prod && aot) { console.warn("Vendor dll bundle will not be used as AOT is enabled"); }
    const bundleConfig: Configuration = webpackMerge(WebpackCommonConfig(env, "main"), {
        entry: {
            app: "./ClientApp/main.ts",
        },
        devtool: prod ? undefined : "eval-source-map",
        plugins: prod || aot ? [] : [
            // AOT chunk splitting does not work while this is active https://github.com/angular/angular-cli/issues/4565
            new DllReferencePlugin({
                context: __dirname,
                manifest: require(path.join(__dirname, outputDir, "vendor-manifest.json")),
            }),
        ],
    });

    return bundleConfig;
};