How to use webpack-chain - 10 common examples

// Common build options for all browsers are set below. Browser-specific
// settings and overrides are defined in separate files, specifically:
//
// - entry
//   - popup entry point differs between web-extension browsers and safari
//   - content script differs between web-extension browsers and safari
//   - web-extension browsers include a background.js and options.js
// - output.path: we create separate output directories for each browser
// - plugins:
//   - copy:
//     - web-extension browsers add manifest.json
//     - safari adds Info.plist and Settings.plist
//   - options-html: web-extension browsers add options.html

const config = new Config();

config.context(__dirname);

config.output.filename('[name].js');

config.resolve.extensions
  .add('.js')
  .add('.jsx')
  .add('.json');

config.module.rule('js')
  .test(/\.jsx?$/)
  .exclude.add(/node_modules/).end()
  .use('babel').loader('babel-loader');

config.module.rule('css')

} else if (args.plugins && config.plugins) {
      // @ts-ignore
      res = config.plugins.map(p => p.__pluginName || p.constructor.name)
    } else if (paths.length > 1) {
      res = {}
      paths.forEach(path => {
        res[path] = get(config, path)
      })
    } else if (paths.length === 1) {
      res = get(config, paths[0])
    } else {
      res = config
    }

    // @ts-ignore
    const output = toString(res, { verbose })
    console.log(highlight(output, { language: 'js' }))
  })
}

} else if (args.rules) {
      res = config.module.rules.map(r => r.__ruleNames[0])
    } else if (args.plugins) {
      res = config.plugins.map(p => p.__pluginName || p.constructor.name)
    } else if (paths.length > 1) {
      res = {}
      paths.forEach(path => {
        res[path] = get(config, path)
      })
    } else if (paths.length === 1) {
      res = get(config, paths[0])
    } else {
      res = config
    }
    // 根据参数 verbose 判断是否需要显示函数定义的内容，如果为 true，则用 function () { /* omitted long function */ } 代替函数的内容
    const output = toString(res, { verbose })
    console.log(output)
  })
}

return name
    })
  } else if (args.plugins) {
    res = config.plugins.map(p => p.__pluginName || p.constructor.name)
  } else if (paths.length > 1) {
    res = {}
    paths.forEach(path => {
      res[path] = get(config, path)
    })
  } else if (paths.length === 1) {
    res = get(config, paths[0])
  } else {
    res = config
  }

  const output = toString(res, { verbose })
  console.log(highlight(output, { language: 'js' }))

  // Log explanation for Nameless Rules
  if (hasUnnamedRule) {
    console.log(`--- ${chalk.green('Footnotes')} ---`)
    console.log(`*: ${chalk.green(
          'Nameless Rules'
        )} were added through the ${chalk.green(
          'configureWebpack()'
        )} API (possibly by a plugin) instead of ${chalk.green(
          'chainWebpack()'
        )} (recommended).
    You can run ${chalk.green(
    'vue-cli-service inspect'
  )} without any arguments to inspect the full config and read these rules' config.`)
  }

return name
        })
      } else if (args.plugins) {
        res = config.plugins.map(p => p.__pluginName || p.constructor.name)
      } else if (paths.length > 1) {
        res = {}
        paths.forEach(path => {
          res[path] = get(config, path)
        })
      } else if (paths.length === 1) {
        res = get(config, paths[0])
      } else {
        res = config
      }

      const output = toString(res, { verbose })
      console.log(highlight(output, { language: 'js' }))

      // Log explanation for Nameless Rules
      if (hasUnnamedRule) {
        console.log(`--- ${chalk.green('Footnotes')} ---`)
        console.log(`*: ${chalk.green(
          'Nameless Rules'
        )} were added through the ${chalk.green(
          'configureWebpack()'
        )} API (possibly by a plugin) instead of ${chalk.green(
          'chainWebpack()'
        )} (recommended).
    You can run ${chalk.green(
    'vue-cli-service inspect'
  )} without any arguments to inspect the full config and read these rules' config.`)
      }

async base(buildConfig = {}) {
        let {globals, build} = this.config;
        /* eslint-disable fecs-one-var-per-line */
        let {path, publicPath, filenames, babel, cssSourceMap, cssMinimize,
            cssExtract, jsSourceMap,
            alias: {base: baseAlias = {}},
            defines: {base: baseDefines = {}}
        } = Object.assign({}, build, buildConfig);
        /* eslint-enable fecs-one-var-per-line */

        let baseConfig = new WebpackChainConfig();

        // set output
        baseConfig.output
            .path(path)
            .publicPath(publicPath);

        // set extensions & alias
        baseConfig.resolve
            .extensions.add('.js').add('.jsx').add('.json');
        let aliasObject = Object.assign({
            '@': globals.rootDir,
            '$': join(globals.rootDir, '.lavas')
        }, baseAlias);
        Object.keys(aliasObject).forEach(aliasKey => {
            baseConfig.resolve.alias.set(aliasKey, aliasObject[aliasKey]);
        });

async base(buildConfig = {}) {
        let {globals, build} = this.config;
        /* eslint-disable fecs-one-var-per-line */
        let {path, publicPath, filenames, cssSourceMap, cssMinimize,
            cssExtract, jsSourceMap, babelOptions,
            alias: {base: baseAlias = {}},
            defines: {base: baseDefines = {}}
        } = Object.assign({}, build, buildConfig);
        /* eslint-enable fecs-one-var-per-line */

        let baseConfig = new WebpackChainConfig();

        // set output
        baseConfig.output
            .path(path)
            .publicPath(publicPath);

        // set extensions & alias
        baseConfig.resolve
            .extensions.add('.js').add('.vue').add('.json');
        let aliasObject = Object.assign({
            '@': globals.rootDir,
            '$': join(globals.rootDir, '.lavas')
        }, baseAlias);
        Object.keys(aliasObject).forEach(aliasKey => {
            baseConfig.resolve.alias.set(aliasKey, aliasObject[aliasKey]);
        });

export default function(opts) {
  const { cwd } = opts || {};
  const isDev = opts.isDev || process.env.NODE_ENV === 'development';

  const webpackConfig = new Config();

  // mode
  webpackConfig.mode('development');

  // entry
  if (opts.entry) {
    // eslint-disable-next-line guard-for-in
    for (const key in opts.entry) {
      const entry = webpackConfig.entry(key);
      makeArray(opts.entry[key]).forEach(file => {
        entry.add(file);
      });
    }
  }

  // output

function output(config, filename) {
  fs.writeFile(
    filename,
    `module.exports = ${Config.toString(config.toConfig())}`,
    error => error && console.log(error),
  );
}

import path from 'path';
import clientConfig from './config/webpack/client';
import Config from 'webpack-chain';

let config = new Config();

import webpack from 'webpack';


export default function webpackBase(nconf) {
  config.context(path.resolve(__dirname, "src"))
  config.resolve.modules
    .add(__dirname)
    .add('node_modules')
    .add('src')
    .end()

  config.resolve.extensions
    .add('*')
    .add('.js')
    .add('.scss')