Can Webpack plugin transform a file like loader?

Question

I know that loaders are used to transform the module. But let's say I have a file that require a special process that can not be done by using loader. Can I develop a plugin to do that? I know Plugin can do many thing including adding new assets. But I don't know how to transform a file by using Plugin like loader

Thank you so much for your support

My webpack config file

const path = require('path');
const { CONSTANTS } = require("../helpers");
const isProductionMode = require("../util/isProductionMode");
const TerserPlugin = require("terser-webpack-plugin");
const { getEnabledExtensions } = require('../../../bin/extension');

module.exports.createBaseConfig = function createBaseConfig(
  isServer
) {
  const extenions = getEnabledExtensions()
  const loaders = [
    {
      test: /\.m?js$/,
      exclude: {
        and: [/node_modules/],
        not: [
          /@evershop[\\/]core/,
          // Include all enabled extension; 
          ...extenions.map(ext => {
            const regex = new RegExp(ext.resolve.replace(/\\/g, '[\\\\\\]').replace(/\//g, '[\\\\/]'));
            return regex;
          })
        ]
      },
      use: [
        {
          loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/LayoutLoader.js'),
        },
        {
          loader: path.resolve(CONSTANTS.LIBPATH, 'webpack/loaders/GraphqlLoader.js'),
        },
        {
          loader: 'babel-loader?cacheDirectory',
          options: {
            sourceType: 'unambiguous',
            cacheDirectory: true,
            presets: [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "esmodules": true
                  },
                  "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-async-to-generator"]
                }
              ],
              '@babel/preset-react'
            ]
          }
        }
      ]
    }
  ];

  const output = isServer ? {
    path: CONSTANTS.BUILDPATH,
    publicPath: CONSTANTS.BUILDPATH,
    filename: isServer === true ? '[name]/server/index.js' : '[name]/client/index.js',
    pathinfo: false
  } : {
    path: CONSTANTS.BUILDPATH,
    publicPath: isProductionMode() ? '/assets/' : '/',
    pathinfo: false
  };

  if (!isProductionMode()) {
    Object.assign(output, {
      chunkFilename: (pathData) => {
        return `${pathData.chunk.renderedHash}/client/${pathData.chunk.runtime}.js`;
      }
    });
  } else {
    Object.assign(output, {
      chunkFilename: (pathData) => {
        return `chunks/${pathData.chunk.renderedHash}.js`;
      }
    });
  }

  if (isServer) {
    output.libraryTarget = 'commonjs2';
    output.globalObject = 'this';
  };

  const config = {
    mode: isProductionMode() ? 'production' : 'development',
    module: {
      rules: loaders
    },
    target: isServer === true ? 'node12.18' : 'web',
    output: output,
    plugins: [],
    cache: { type: 'memory' }
  };

  config.optimization = {};
  if (isProductionMode()) {
    config.optimization = Object.assign(config.optimization, {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            parse: {
              // We want uglify-js to parse ecma 8 code. However, we don't want it
              // to apply any minification steps that turns valid ecma 5 code
              // into invalid ecma 5 code. This is why the 'compress' and 'output'
              // sections only apply transformations that are ecma 5 safe
              // https://github.com/facebook/create-react-app/pull/4234
              ecma: 2020,
            },
            compress: {
              ecma: 5,
              warnings: false,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              // Turned on because emoji and regex is not minified properly using
              // default. See https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            }
          }
        })
      ]
    });
  }

  return config;
}

score 1 · Answer 1 · answered Oct 28 '22 at 04:10

1

Could you elaborate more on what kind of file you're trying to load? Webpack can load pretty much anything related to web development. I recommend processing certain files before you load them with webpack.Webpack loaders library

answered Oct 28 '22 at 04:10

K JOHN

195
7

Hi @k-john, I am trying to parse the tailwind css file. The thing is I need to know all the module will be include in the bundle so tailwind will look up and do the purge process. I can not just use the 'content' configuration in tailwind config because it is not available at beginning – Thelearning Oct 29 '22 at 05:31
Can I see your webpack configuration file – K JOHN Oct 31 '22 at 09:35
I just updated the question with my Webpack config file. Thanks – Thelearning Nov 01 '22 at 12:13
Did you use postcss? I don't see any styleHandler or postcss loaders. Hope article will help. https://gsc13.medium.com/how-to-configure-webpack-5-to-work-with-tailwindcss-and-postcss-905f335aac2 – K JOHN Nov 02 '22 at 04:11
I know how to setup Tailwind with Webpack using postcss. The only thing is my setup is quite different, In order to compile Tailwind css, I need to wait and know all the modules that included inside the final bundle. It is not something Webpack loader supports – Thelearning Nov 02 '22 at 05:52

Can Webpack plugin transform a file like loader?

1 Answers1