Neurologically Paralyzing Mouseovers

    @nowa/module-webpack
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.0 • Public • Published

    nowa-module-webpack

    Module Config

    export interface IOptions {
      mode?: 'run' | 'watch' | 'devServer';
    }
    export type ConfigFileContent = 
      | ((
          { context, options }{ context: string; options: object },
        ) => Webpack.Configuration | Webpack.Configuration[] | Promise<Webpack.Configuration | Webpack.Configuration[]>)
      | Webpack.Configuration
      | Webpack.Configuration[];
    export type SingleConfig = /* path to configFile */ string | ConfigFileContent;
    export type Config = ['webpack', SingleConfig | SingleConfig[], IOptions | undefined];

    Usage

    const config1 = ['webpack', 'sompath/webpack.config.js']; // config file
    const config2 = ['webpack', ['sompath/webpack.app.js', 'sompath/webpack.page.js']]; // MultiCompiler
    const config3 = ['webpack', { entry: './src/index.js', ...otherWebpackConfig }]; // raw config
    const config4 = ['webpack', { watch: true, ...}]; // watch mode
    const config5 = ['webpack', { devServer: { ...}, ...}]; // devServer mode
    const config6 = ['webpack', { devServer: { ...}, ...}, { mode: 'run' }]; // run mode (ignore devServer)

    Mode

    there are 3 modes now

    • webpack run
    • webpack watch
    • webpack-dev-server

    if mode is not set, module-webpack will decide it directly from the final config.

    1. config.devServer is truthy => webpack-dev-server
    2. config.watch is truthy => webpack watch source files and changes triggers recompile
    3. else => simple webpack build

    Function Type Webpack Config

    Webpack supports exporting a function as a config. But its hard to use.

    Therefore, module-webpack replace that support with a more advanced solution.

    Instead of function (env, argv) {} from native webapck, module-webapck supports function ({ context, options }) {}

    • string context is the project root (context in nowa2)
    • object options is the nowa options from your command line arguments, config and solution

    Examples

    nowa2 xxxx --language en --multiPage true
    const config1 = [
      'webpack',
      {
        config: ({ context, options }) => ({
          context,
          entry: `./src/index.${options.language}.js`, // ./src/index.en.js
          ...otherWebpackConfig,
        }),
      },
    ];
    const config2 = ['webpack', 'sompath/webpack.config.js'];

    with sompath/webpack.config.js

    module.exports = async ({ context, options }) => {
      if (option.multiPage /* true */) {
        // ...
      }
      // ...
    };

    Overwrite Final Webpack Config

    In some cases we need modify webpack config, but we cannot change nowa soltion directly (in a npm package).

    We can create a webpack.config.js in project root. In this file you can access then final webpack config and return a new one to replace it.

    This file can export a fucntion, the function signature is function (originalConfig, rumtime, webpack) {}

    • originalConfig is the final config generated by nowa, will be passed to webpack soon
    • runtime is a object with properties
      • string context
      • object options
      • Array commands is the actual command you type
        e.g. nowa2 build prod => ['build', 'prod']
      • object config is the module config for module-webpack in you solution

    it also supports specify which command the overwrite will take place like config / solution

    Examples

    module.exports = (config, rumtime, webpack) => {
      // overwrite all command using module-webpack
      config.plugins.push(new webpack.SomeBuiltinPlugin());
      return config;
    };
    module.exports = {
      // export an object instead of fucntion
      build: [
        (config, rumtime, webpack) => {
          // overwrite on build command only
          config.plugins.push(new webpack.SomeBuiltinPlugin());
          return config;
        },
      ],
      dev: [
        (config, rumtime, webpack) => {
          // overwrite on dev command only
          config.plugins.push(new webpack.SomeOtherBuiltinPlugin());
          return config;
        },
      ],
    };

    Keywords

    none

    Install

    npm i @nowa/module-webpack

    DownloadsWeekly Downloads

    0

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    28.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • gbk
    • onbing
    • tommytroylin
    • yjson