React-app-rewired: webpack plugins override question

Created on 25 Jan 2018  路  2Comments  路  Source: timarney/react-app-rewired

I want to override webpack plugins ExtractTextPlugin

{ bail: true, devtool: 'source-map', entry: [ '/Users/fanyaohua/Work/service-process/node_modules/react-scripts/config/polyfills.js', '/Users/fanyaohua/Work/service-process/src/index.js' ], output: { path: '/Users/fanyaohua/Work/service-process/build', filename: 'static/js/[name].[chunkhash:8].js', chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', publicPath: '//static.zhongan.com/website/life/bifrost/test/', devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate] }, resolve: { modules: [ 'node_modules', '/Users/fanyaohua/Work/service-process/node_modules' ], extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ], alias: { 'babel-runtime': '/Users/fanyaohua/Work/service-process/node_modules/babel-runtime', 'react-native': 'react-native-web' }, plugins: [ [Object] ] }, module: { strictExportPresence: true, rules: [ [Object], [Object] ] }, plugins: [ InterpolateHtmlPlugin { replacements: [Object] }, HtmlWebpackPlugin { options: [Object] }, DefinePlugin { definitions: [Object] }, UglifyJsPlugin { options: [Object] }, ExtractTextPlugin { filename: 'static/css/[name].[contenthash:8].css', id: 1, options: {} }, ManifestPlugin { opts: [Object] }, SWPrecacheWebpackPlugin { config: {}, options: [Object], overrides: {}, warnings: [] }, IgnorePlugin { resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/, checkIgnore: [Function: bound checkIgnore] } ], node: { dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }

how can i do?Because ExtractTextPlugin is not a string,I can't replace it

Most helpful comment

Hey, I use this utility function :

const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (pluginIndex === -1) {
    return plugins;
  }

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

like this:

const htmlPlugin = new HtmlWebpackPlugin();

replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), htmlPlugin);

All 2 comments

Hey, I use this utility function :

const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (pluginIndex === -1) {
    return plugins;
  }

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

like this:

const htmlPlugin = new HtmlWebpackPlugin();

replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), htmlPlugin);

@ngotchac Thank you very much! It works!馃槃馃槃

Was this page helpful?
0 / 5 - 0 ratings