index.js

const htmlLoader = require('@neutrinojs/html-loader');
const styleLoader = require('@neutrinojs/style-loader');
const fontLoader = require('@neutrinojs/font-loader');
const imageLoader = require('@neutrinojs/image-loader');
const compileLoader = require('@neutrinojs/compile-loader');
const env = require('@neutrinojs/env');
const hot = require('@neutrinojs/hot');
const htmlTemplate = require('@neutrinojs/html-template');
const clean = require('@neutrinojs/clean');
const loaderMerge = require('@neutrinojs/loader-merge');
const devServer = require('@neutrinojs/dev-server');
const { resolve } = require('url');
const merge = require('deepmerge');
const HtmlWebpackIncludeSiblingChunksPlugin = require('html-webpack-include-sibling-chunks-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = (neutrino, opts = {}) => {
  const mode = neutrino.config.get('mode');
  const publicPath = opts.publicPath || './';
  const options = merge({
    publicPath,
    env: [],
    hot: true,
    html: {},
    devServer: {
      hot: opts.hot !== false,
      publicPath: resolve('/', publicPath)
    },
    style: {
      hot: opts.hot !== false,
      extract: mode === 'production'
    },
    manifest: opts.html === false ? {} : false,
    clean: opts.clean !== false && {
      paths: [neutrino.options.output]
    },
    minify: {
      source: mode === 'production'
    },
    babel: {},
    targets: {},
    font: {},
    image: {}
  }, opts);

  if ('babel' in options.minify) {
    throw new Error('The minify.babel option has been removed. See the web preset docs for how to customise source minification.');
  }

  if ('image' in options.minify) {
    throw new Error('The minify.image option has been removed. To enable image minification use the @neutrinojs/image-minify preset.');
  }

  if ('style' in options.minify) {
    throw new Error('The minify.style option has been removed. To enable style minification use the @neutrinojs/style-minify preset.');
  }

  if (typeof options.devServer.proxy === 'string') {
    options.devServer.proxy = {
      '**': {
        target: options.devServer.proxy,
        changeOrigin: true,
        headers: {
          'X-Dev-Server-Proxy': options.devServer.proxy
        }
      }
    };
  }

  if (!options.targets.node && !options.targets.browsers) {
    options.targets.browsers = [
      'last 2 Chrome versions',
      'last 2 Firefox versions',
      'last 2 Edge versions',
      'last 2 Opera versions',
      'last 2 Safari versions',
      'last 2 iOS versions'
    ];
  }

  Object.assign(options, {
    style: options.style && merge(options.style, {
      extract: options.style.extract === true ? {} : options.style.extract
    }),
    babel: compileLoader.merge({
      plugins: [
        require.resolve('@babel/plugin-syntax-dynamic-import')
      ],
      presets: [
        [require.resolve('@babel/preset-env'), {
          debug: neutrino.options.debug,
          modules: false,
          useBuiltIns: 'entry',
          targets: options.targets
        }]
      ]
    }, options.babel)
  });

  if (options.env.length) {
    neutrino.use(env, options.env);
  }

  neutrino.use(htmlLoader);
  neutrino.use(compileLoader, {
    include: [
      neutrino.options.source,
      neutrino.options.tests
    ],
    babel: options.babel
  });

  neutrino.config
    // This must be before html-webpack-plugin (but with variable main names it's a pain to use .before()).
    // TODO: Remove this plugin once html-webpack-plugin fully supports webpack 4's splitChunks
    // https://github.com/jantimon/html-webpack-plugin/issues/880
    .plugin('html-sibling-chunks')
      .use(HtmlWebpackIncludeSiblingChunksPlugin);

  Object
    .keys(neutrino.options.mains)
    .forEach(key => {
      neutrino.config
        .entry(key)
          .add(neutrino.options.mains[key])
          .when(options.html, () => {
            neutrino.use(htmlTemplate, merge({
              pluginId: `html-${key}`,
              filename: `${key}.html`,
              // html-webpack-include-sibling-chunks-plugin dynamically updates this to
              // include the runtime chunk and any chunks generated by splitChunks.
              chunks: [key]
            }, options.html));
          });
    });

  const jsFilename = mode === 'production' ? '[name].[contenthash:8].js' : '[name].js';

  neutrino.config
    .optimization
      .minimize(options.minify.source)
      .splitChunks({
        // By default SplitChunksPlugin only splits out the async chunks (to avoid the
        // ever-changing file list breaking users who don't auto-generate their HTML):
        // https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks-chunks-all
        // https://github.com/webpack/webpack/issues/7064
        chunks: 'all',
        // By default the generated files use names that reference the chunk names, eg:
        // `vendors~index~page2.b694ee99.js`. Setting to `false` causes them to use the
        // chunk ID instead (eg `1.ceddedc0.js`), which prevents cache-busting when a
        // new page is added with the same shared vendor dependencies.
        name: mode !== 'production'
      })
      // Create a separate chunk for the webpack runtime, so it can be cached separately
      // from the more frequently-changing entrypoint chunks.
      .runtimeChunk('single')
      .end()
    .when(options.style, () => neutrino.use(styleLoader, options.style))
    .when(options.font, () => neutrino.use(fontLoader, options.font))
    .when(options.image, () => neutrino.use(imageLoader, options.image))
    .target('web')
    .context(neutrino.options.root)
    .output
      .path(neutrino.options.output)
      .publicPath(options.publicPath)
      .filename(jsFilename)
      .chunkFilename(jsFilename)
      .end()
    .resolve
      .extensions
        .merge(neutrino.options.extensions.concat('json').map(ext => `.${ext}`))
        .end()
      .end()
    .node
      .set('Buffer', false)
      .set('fs', 'empty')
      .set('tls', 'empty')
      .end()
    .module
      .rule('worker')
        .test(neutrino.regexFromExtensions(neutrino.options.extensions.map(ext => `worker.${ext}`)))
        .use('worker')
          .loader(require.resolve('worker-loader'))
          .end()
        .end()
      .end()
    .when(neutrino.config.module.rules.has('lint'), () => {
      neutrino.use(loaderMerge('lint', 'eslint'), {
        envs: ['browser', 'commonjs']
      });
    })
    .when(mode === 'development', config => {
      neutrino.use(devServer, options.devServer);
      config.devtool('cheap-module-eval-source-map');
      config.when(options.hot, () => {
        neutrino.use(hot);

        if ('hotEntries' in options) {
          throw new Error(
            'The options.hotEntries option has been removed. ' +
            'See the "neutrino.options.mains" docs for details on adding ' +
            'custom hot entries to your bundle without importing.'
          );
        }
      });
    })
    .when(mode === 'production', (config) => {
      config.when(options.clean, () => neutrino.use(clean, options.clean));

      if (options.manifest) {
        neutrino.config.plugin('manifest')
          .use(ManifestPlugin, [options.manifest]);
      }
    });
};