How to use assets-webpack-plugin - 10 common examples

};
  const plugins = [
    //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
    new webpack.DefinePlugin(GLOBALS),
    new ExtractTextPlugin('/styles.[contenthash].css'),
    require('autoprefixer')
  ];

  if (isServerRender) {
    return plugins;
  }

  switch (env) {
    case 'production':
      plugins.push(new webpack.optimize.UglifyJsPlugin());
      plugins.push(new AssetsPlugin({
        path: path.join(__dirname, '..', 'dist'),
        filename: 'assets.json',
        fullPath: false
      }));
      plugins.push(new webpack.optimize.CommonsChunkPlugin({
        names: [ "manifest", "vendor"],
        minChunks: function(module, count) {
          // any required modules inside node_modules are extracted to vendor
          return (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, '../node_modules')
            ) === 0
          )
        }

ssr: true,
                  },
                ],
                [
                  require.resolve('./util/loadableBabel.js'),
                  {
                    server: true,
                    webpack: true,
                  },
                ],
              ]),
            },
          },
        ],
      }),
      new AssetsPlugin({
        filename: 'assets-manifest.json',
        path: bundle.assetsDir,
        prettyPrint: true,
      }),
      ifProd(() => new webpack.HashedModuleIdsPlugin()),
      ifProd(
        () =>
          new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks(module) {
              // A module is extracted into the vendor chunk when...
              return (
                // If it's inside node_modules
                /node_modules/.test(module.context) &&
                // Do not externalize if the request is a CSS file
                !/\.(css|less|scss|sass|styl|stylus)$/.test(module.request)

"process.env.CLIENT_BUNDLE_OUTPUT_PATH": JSON.stringify(process.env.CLIENT_BUNDLE_OUTPUT_PATH),
        "process.env.CLIENT_PUBLIC_PATH": JSON.stringify(process.env.CLIENT_PUBLIC_PATH),

        "process.env.CLIENT_BUNDLE_ASSETS_FILENAME": JSON.stringify(process.env.CLIENT_BUNDLE_ASSETS_FILENAME),
        "process.env.CLIENT_BUNDLE_CHUNK_MANIFEST_FILENAME": JSON.stringify(process.env.CLIENT_BUNDLE_CHUNK_MANIFEST_FILENAME),

        "process.env.CLIENT_BUNDLE_HTTP_PATH": JSON.stringify(process.env.CLIENT_BUNDLE_HTTP_PATH),
        "process.env.CLIENT_BUNDLE_CACHE_MAXAGE": JSON.stringify(process.env.CLIENT_BUNDLE_CACHE_MAXAGE)
      }),

      // Generates a JSON file containing a map of all the output files for
      // our webpack bundle. A necessisty for our NodeJS rendering process
      // as we need to interogate these files in order to know what JS/CSS
      // we need to inject into our HTML.
      ifWeb(
        new AssetsPlugin({
          filename: process.env.CLIENT_BUNDLE_ASSETS_FILENAME,
          path: path.resolve(root, process.env.CLIENT_BUNDLE_OUTPUT_PATH),
          prettyPrint: true
        })
      ),

      // Effectively fake all "file-loader" files with placeholders on NodeJS
      ifNode(new webpack.NormalModuleReplacementPlugin(
        /\.(eot|woff|woff2|ttf|otf|svg|png|jpg|jpeg|gif|webp|webm|mp4|mp3|ogg|html|pdf)$/,
        "node-noop"
      )),

      // We don't want webpack errors to occur during development as it will
      // kill our development NodeJS instances.
      ifDev(new webpack.NoEmitOnErrorsPlugin()),

"process.env.CLIENT_BUNDLE_OUTPUT_PATH": JSON.stringify(process.env.CLIENT_BUNDLE_OUTPUT_PATH),
        "process.env.CLIENT_PUBLIC_PATH": JSON.stringify(process.env.CLIENT_PUBLIC_PATH),

        "process.env.CLIENT_BUNDLE_ASSETS_FILENAME": JSON.stringify(process.env.CLIENT_BUNDLE_ASSETS_FILENAME),
        "process.env.CLIENT_BUNDLE_CHUNK_MANIFEST_FILENAME": JSON.stringify(process.env.CLIENT_BUNDLE_CHUNK_MANIFEST_FILENAME),

        "process.env.CLIENT_BUNDLE_HTTP_PATH": JSON.stringify(process.env.CLIENT_BUNDLE_HTTP_PATH),
        "process.env.CLIENT_BUNDLE_CACHE_MAXAGE": JSON.stringify(process.env.CLIENT_BUNDLE_CACHE_MAXAGE)
      }),

      // Generates a JSON file containing a map of all the output files for
      // our webpack bundle. A necessisty for our NodeJS rendering process
      // as we need to interogate these files in order to know what JS/CSS
      // we need to inject into our HTML.
      ifWeb(
        new AssetsPlugin({
          filename: process.env.CLIENT_BUNDLE_ASSETS_FILENAME,
          path: path.resolve(root, process.env.CLIENT_BUNDLE_OUTPUT_PATH),
          prettyPrint: true
        })
      ),

      // We don't want webpack errors to occur during development as it will
      // kill our development NodeJS instances.
      ifDev(new webpack.NoEmitOnErrorsPlugin()),

      // We need this plugin to enable hot module reloading for our dev NodeJS.
      ifDevWeb(new webpack.HotModuleReplacementPlugin()),

      // This is a production client so we will extract our CSS into
      // CSS files.
      ifProdWeb(

rootDir,
  srcDir,
  srcPublicDir
} from "../../directories";

import rules, {stats} from "./prod.rules";

const isolateVendorScripts = false;

const configDirName = "config";
// Config dir is the dir that contains all the configurations
const configDir = path.join(srcDir, configDirName);

// We would need the assets as different file as we
// would like it to include in the dev.server.js
const AssetsPluginInstance = new AssetsPlugin({
  filename: "assets.js",
  path: configDir,
  update: true,
  prettyPrint: true,
  assetsRegex: /\.(jpe?g|png|gif|svg)\?./i,
  processOutput: function (assets) {
    return `export default ${JSON.stringify(assets)};`;
  }
});

const pages = fs.readdirSync(pagesDir);
let entries = {};
pages.forEach(page => {
  const slugishName = page.replace(/\.jsx?$/, "");
  entries[`mod-${slugishName}`] = path.join(pagesDir, page);
});

new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
  }),
  // how you want your code to be optimized
  // all configurable
  new webpack.IgnorePlugin(/un~$/),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'assets/common-[hash].js',
    minChunks: optimizationMinChunks,
  }),
  new SaveAssetsJson({
    path: path.join(__dirname, 'docroot'),
    filename: 'assets.json',
    prettyPrint: true,
    metadata: {
      version: process.env.PACKAGE_VERSION,
    },
  }),
  new ExtractTextPlugin({
    filename: 'assets/[name]-[hash].css',
    disable: false,
    allChunks: true,
  })
);

webpackConfig.plugins = webpackConfig.plugins.concat(htmlPlugins);

getPlugins() {
    return [
      ...super.getPlugins(),
      // Emit a file with assets paths
      // https://github.com/sporto/assets-webpack-plugin#options
      new AssetsPlugin({
        path: this.resolvePath('build'),
        filename: 'assets.js',
        processOutput: x => `module.exports = ${JSON.stringify(x)};`,
      }),
      new WebpackAssetsManifest({
        output: this.resolvePath('build/asset-manifest.json'),
        publicPath: true,
        writeToDisk: true,
        customize: ({ key, value }) => {
          // You can prevent adding items to the manifest by returning false.
          if (key.toLowerCase().endsWith('.map')) return false;
          return { key, value };
        },
        done: (manifest, stats) => {
          // Write chunk-manifest.json.json
          // const chunkFileName = this.resolvePath('build/asset-manifest.json');

import CleanWebpackPlugin from "clean-webpack-plugin";
import UglifyJSPlugin from "uglifyjs-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin";

import generateConfig, { srcDir, rootDir, srcPublicDir, distPublicDir } from "./config-generator";

const hash = "[chunkhash]";

const configDirName = "config";

// Config dir is the dir that contains all the configurations
const configDir = path.join(srcDir, configDirName);

// We would need the assets as different file as we
// would like it to include in the dev.server.js
const AssetsPluginInstance = new AssetsPlugin({
  filename: "assets.js",
  path: configDir,
  update: true,
  prettyPrint: true,
  processOutput: function (assets) {
    return `export default ${JSON.stringify(assets)};`;
  }
});

const entry = {
  // Initial entry point
  // @todo Need to replace with routes
  "app": path.join(srcDir, "client", "index.js"),
};

const plugins = [

export default function createWebConfig(
  webpackConfig,
  action,
  { paths, host, port, envs, environment }
) {
  webpackConfig = {
    ...webpackConfig,
    entry: {
      client: paths.client
    },
    plugins: [
      new NamedModulesPlugin(),
      new AssetsWebpackPlugin({
        path: paths.dist,
        filename: 'assets.json'
      }),
      new DefinePlugin({
        ...envs
      })
    ]
  };
  if (environment === 'development') {
    webpackConfig = {
      ...webpackConfig,
      output: {
        path: paths.distPublic,
        publicPath: `http://${host}:${port}/`,
        pathinfo: true,
        filename: 'scripts/bundle.js',

},
      extensions: _.uniq([
        `.${platform.properties.name}.client.js`,
        `.${platform.properties.name}.client.json`,
        `.${platform.properties.name}.client.jsx`,
        `.${platform.properties.name}.client.mjs`,
        `.${platformName}.client.js`,
        `.${platformName}.client.json`,
        `.${platformName}.client.jsx`,
        `.${platformName}.client.mjs`,
        ...(webpackConfig?.resolve?.extensions || [])
      ])
    },
    plugins: [
      ...webpackConfig.plugins,
      new AssetsWebpackPlugin({
        path: path.resolve(rootPath, paths.dist),
        filename: 'assets.json'
      }),
      new IgnorePlugin(/^child_process$/),
      new IgnorePlugin(/^deasync$/),
      new IgnorePlugin(/^fs$/),
      new IgnorePlugin(/^winston$/)
    ]
  };
  if (env === 'development') {
    webpackConfig = {
      ...webpackConfig,
      output: {
        path: path.resolve(rootPath, paths.dist, 'public'),
        publicPath: action === 'start' ? `http://${host}:${ports.dev}/` : '/',
        pathinfo: true,