From webpack to vite: custom module resolution, sass import, babel config

Background

Being a long time Webpack user and mastering most of its features, i was reluctant to migrate to other build tool.

On the other side, news like Storybook improving vite support or how Vite is getting fast lead me to consider mig…


This content originally appeared on DEV Community and was authored by Luiz Américo

Background

Being a long time Webpack user and mastering most of its features, i was reluctant to migrate to other build tool.

On the other side, news like Storybook improving vite support or how Vite is getting fast lead me to consider migrating away from the ageing tool. The main Webpack developer moving to another project helped in the decision to modernize the build stack.

I could try Turbopack or Rspack that explicitly aims to be a webpack successor but i decided to go with Vite which is more mature at this time.

Below are the issues i faced and how i overcome them.

Custom module resolution

I have configured Webpack to lookup for modules in ./src and ./src/common. The resolve.modules option makes it straight forward:

 {
   //.. 
   resolve: {
     modules: [
        path.resolve(__dirname, './src/common'),
        path.resolve(__dirname, './src'),
        'node_modules',
     ],
   },
 }

This is an option that i was expecting to be exposed by Vite, but is not and will not be.

Following suggestion in the issue, i looked at vite-tsconfig-paths which is even better because i already have configured vscode through typescript config:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    // This must be specified if "paths" is set
    "baseUrl": "./src/",
    // Relative to "baseUrl"
    "paths": {
      "*": [
        "./common/*",
        "*"
      ]
    }
  }
}

One small problem delayed a bit the migration: lack of support to jsconfig.json. Renaming jsconfig.json to tsconfig.json and adding allowJs option made it work.

As a bonus, the module lookup configuration is now in only one place.

Importing external sass modules

With Webpack i have to add a "~" in front of module name in order of a sass import.

Vite does not require it.

@import '~bootstrap/scss/bootstrap';

becomes

@import 'bootstrap/scss/bootstrap';

Babel configuration

I use decorators extensively in my projects, so Babel is required. vite-plugin-babel does what i need: transpile both in development and in production.

It worked at first just by following project instructions, but needs some tweaking to match my requirements:

  • Add source maps in development. Option babelConfig: { sourceMaps: mode === 'development' ? 'inline' : false } made it work.
  • Exclude node_modules. By default vite-plugin-babel transpile all javascript including the ones from external packages. Setting filter: /^(?!.*node_modules(?!.*luipack)).*\.jsx?$/ did the trick (luipack module needs to be transpiled)

Initial impressions

So far, the result is what i expected: faster startup and reload with less configuration.

I only migrated a starter application but i hope to get same benefits with the actual / big projects.


This content originally appeared on DEV Community and was authored by Luiz Américo


Print Share Comment Cite Upload Translate Updates
APA

Luiz Américo | Sciencx (2023-04-30T10:44:53+00:00) From webpack to vite: custom module resolution, sass import, babel config. Retrieved from https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/

MLA
" » From webpack to vite: custom module resolution, sass import, babel config." Luiz Américo | Sciencx - Sunday April 30, 2023, https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/
HARVARD
Luiz Américo | Sciencx Sunday April 30, 2023 » From webpack to vite: custom module resolution, sass import, babel config., viewed ,<https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/>
VANCOUVER
Luiz Américo | Sciencx - » From webpack to vite: custom module resolution, sass import, babel config. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/
CHICAGO
" » From webpack to vite: custom module resolution, sass import, babel config." Luiz Américo | Sciencx - Accessed . https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/
IEEE
" » From webpack to vite: custom module resolution, sass import, babel config." Luiz Américo | Sciencx [Online]. Available: https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/. [Accessed: ]
rf:citation
» From webpack to vite: custom module resolution, sass import, babel config | Luiz Américo | Sciencx | https://www.scien.cx/2023/04/30/from-webpack-to-vite-custom-module-resolution-sass-import-babel-config/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts