How to use webpack-node-externals - 10 common examples

//     // console.log(depsStr);
      //     // console.log(request.match(/^[@a-z][a-z\/\.\-0-9]*$/i), !!request.match(/^[@a-z][a-z\/\.\-0-9]*$/i));
      //     // console.log(request.match(/\.(css|less|scss|sss)$/i), !request.match(/\.(css|less|scss|sss)$/i));
      //     // console.log(request.match(new RegExp(`^(${depsStr})`)), !request.match(new RegExp(`^(${depsStr})`)));
      //     // !Boolean(isExternal) && console.log('!!!!!!!!!!!!ext', request, !request.match(new RegExp(`^(${depsStr})`)), Boolean(isExternal));
      //     // console.log('==================');
      //     callback(null, Boolean(isExternal));
      //   },
      //
      // ],

      externals: [
        './chunk-manifest.json',
        './asset-manifest.json',
        './assets',
        nodeExternals({
          whitelist: [
            new RegExp(`^(${this.getDeps().map(dep => dep.name).filter(a => a).join('|')})`),
            this.reStyle,
            this.reImage,
          ],
        }),
        // (context, request, callback) => {
        //   const depsStr = this.getDeps().map(dep => dep.name).filter(a => a).join('|');
        //   console.log('depsStr', depsStr);
        //   const isExternal =
        //     request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) &&
        //     !request.match(/\.(css|less|scss|sss)$/i) &&
        //     (!depsStr || !request.match(new RegExp(`^(${depsStr})`)));
        //   // console.log('==================');
        //   // console.log(depsStr);
        //   // console.log(request.match(/^[@a-z][a-z\/\.\-0-9]*$/i), !!request.match(/^[@a-z][a-z\/\.\-0-9]*$/i));

});

        /**
         * Generally in ssr, we don't need any loader to handle style files,
         * but some UI library such as vuetify will require style files directly in JS file.
         * So we still add some relative loaders here.
         */
        this.addStyleRules(serverConfig, {
            cssSourceMap: false,
            cssMinimize: false,
            cssExtract: true
        });

        // https://webpack.js.org/configuration/externals/#externals
        // https://github.com/liady/webpack-node-externals
        serverConfig.externals(nodeExternals({
            // do not externalize CSS files in case we need to import it from a dep
            whitelist: [...nodeExternalsWhitelist, /\.css$/]
        }));

        // modify vars in DefinePlugin
        serverConfig.plugin('define').init((Plugin, args) =>
            new Plugin(Object.assign(args[0], {
                'process.env.REACT_ENV': '"server"',
                'process.env.NODE_ENV': `"${this.env}"`
            }, serverDefines)));

        // call extendWithWebpackChain function if provided
        let extendWithWebpackChainArray = [
            extendWithWebpackChain,
            this.config.build.extendWithWebpackChain
        ];

export default (options) => {

  const config = {
    context: process.cwd(),
    // devtool: 'inline-source-map',
    // devtool: 'eval',
    devtool: false,
    target: 'node',
    entry: {
      index: [options.entry]
    },
    output: {
      path: options.outputPath,
      filename: `${options.outputName}.js`
    },
    externals: nodeExternals({}),
    resolve: {
      extensions: ['.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /(\.js|\.jsx)$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader'
        }
      ]
    },

    plugins: []
  };

const isDev = process.env.NODE_ENV === 'development'

let config: any
try {
  // config文件必须位于根目录
  config = require(resolve(cwd,'./config/config.ssr'))
} catch (error) {
  // 兼容以前的版本，没有config.ssr取config.default
  config = require(resolve(cwd,'./config/config.default'))
}

serverConfig.entry = {
  Layout: join(paths.appSrc, './layout')
}
serverConfig.output.path = resolve(__dirname, '../dist')
serverConfig.externals = nodeExternals({
  whitelist: [/\.(css|less|sass|scss)$/, /^antd.*?css/],
  modulesDir: resolve(__dirname, '../../') // 保证寻找第三方模块的node_modules是当前应用的node_modules
})

const reactToStream = (Component: React.FunctionComponent, props: object) => {
  return renderToNodeStream(React.createElement(Component, props))
}
const renderLayout = async (ctx: any) => {
  const layoutPath = resolve(__dirname, '../dist/Layout.server.js')
  if (isDev) {
    Shell.rm('-rf', layoutPath)
    delete require.cache[layoutPath]
  }
  let Layout
  try {
    Layout = require(layoutPath).default

...(umd
          ? {
            libraryTarget: 'umd',
            globalObject: 'this',
          }
          : {
            libraryTarget: 'commonjs2',
          }),
      },

      externals: includeDependencies
        ? {
            // js-yaml includes `esprima` by default, but we don't need it
          esprima: true,
        }
        : [nodeExternals()],

      module: {
        rules: baseRules,
      },

      resolve: {
        modules: ['node_modules'],
        extensions: ['.js', '.json'],
      },

      optimization: {
        minimize: !!minimize,
        minimizer: [
          compiler =>
            new TerserPlugin({
              cache: true,

import base from './webpack.base.config';

export default merge(base, {
    target: 'node',
    devtool: '#source-map',
    entry: resolveSrc('./entry-server.js'),

    output: {
        path: resolveRelease(),
        filename: 'entry-server.js',
        libraryTarget: 'commonjs2'
    },

    // https://webpack.js.org/configuration/externals/#externals
    // https://github.com/liady/webpack-node-externals
    externals: nodeExternals({
        // do not externalize CSS files in case we need to import it from a dep
        whitelist: /\.css$/
    }),

    plugins: [
        new webpack.DefinePlugin({
            ...GLOBAL_DEFINES,
            'process.env.VUE_ENV': '"server"'
        }),

        new VueSSRServerPlugin()
    ]
});

return /\.pre\.css$/.test(file) === false && /\.(js|css|svg)$/.test(file) === true;
                    },
                },
                deleteOriginalAssets: true,
            }),
        isProd && isBrowser && new webpack.optimize.ModuleConcatenationPlugin(),
        isProd && isBrowser && new webpack.HashedModuleIdsPlugin(),
    ]),
    node: isBrowser ?
        {
            fs: "empty",
            net: "empty",
            tls: "empty",
        } :
        {},
    externals: clean([isNode && nodeExternals()]),
    performance: {
        hints: isProd && isBrowser ? "warning" : false,
    },
    devtool: `${ isDev ? "inline-" : "" }source-map`,
    watchOptions: {
        aggregateTimeout: isNode ? 300 : 1000,
    },
    devServer: {
        contentBase: path.join(projectRoot, "public"),
        inline: true,
        historyApiFallback: true,
        proxy: {
            "/": `http://${ serverConfig.hostname }:${ serverConfig.port }/`,
        },
    },
};

presets: [`@ninetales/babel-preset/build/${preset}`],
            },
          },
        },
      ],
    },
  };

  if (env === "client") {
    webpackConfig.output.publicPath = "/.assets/";
  }

  if (env === "server") {
    webpackConfig.target = "node";
    webpackConfig.output.libraryTarget = "commonjs2";
    webpackConfig.externals = [nodeExternals()];
  }

  if (config.transformWebpackConfig !== undefined) {
    config.transformWebpackConfig(webpackConfig);
  }

  return webpackConfig;
}

{ isDev, isServer: false, clientBundlePath, serverBundlePath, serverManager, useBabili },
        envVariables,
      ),
      target: 'web',
    },
    server: {
      bail: !isDev,
      devtool: isDev ? 'inline-source-map' : 'source-map',
      entry: [
        isDev ? require.resolve('source-map-support/register') : null,
        require.resolve('./polyfills/server'),
        require.resolve('./helpers/provideVariables'),
        resolvePath(appDir, './server/index.js'),
      ].filter(Boolean),
      externals: [
        nodeExternals({
          whitelist: [
            /\.(eot|woff|woff2|ttf|otf)$/,
            /\.(svg|png|jpg|jpeg|gif|ico)$/,
            /\.(mp4|mp3|ogg|swf|webp)$/,
            /\.(css|scss|sass|sss|less)$/,
            /react-loadable/,
            /is-webpack-bundle/,
            /webpack-require-weak/,
          ],
        }),
      ],
      output: {
        filename: 'server.js',
        libraryTarget: 'commonjs2',
        path: serverBundlePath,
        publicPath: '/',

import { dependencies } from '../package.json'
import config from '../build.config'


export default {
  context: path.resolve(__dirname, '..'),

  entry: env.detect({
    prod: './server',
    default: './server/server',
  }),

  mode: 'development',
  target: 'node',
  externals: nodeExternals(),

  node: {
    __filename: false,
    __dirname: false,
  },

  output: {
    path: path.resolve(__dirname, '../dist/server'),
    filename: env.is.prod ? 'bundle.js' : 'bundle.[chunkhash:8].js',
    chunkFilename: 'chunk.[chunkhash:8].js',
    libraryTarget: 'commonjs2',
  },

  resolve: {
    alias: { ...config.alias },
  },