Home » Development » Create and edit webpack configuration file automatically

Create and edit webpack configuration file automatically

If you are working with a variety of packages, resources, and styling extensions, an easy way to create and edit webpack configuration file (webpack.config.js) might be just the tool you have been looking for.

Webpack is a tool to bundle your assets (scripts, styles, images). It protects their dependencies to each other. I think the diagram below explains it very well (courtesy of webpack.js.org).

Create and edit webpack configuration file
What is webpack?

Looking for instructions to use JavaScript in your Visual Studio React template? Check this post out.

Easy way to create and edit webpack configuration file

When you have several resource files and complex dependencies, editing webpack configuration file may become cumbersome. Thankfully, there are tools to make this task a lot easier by simple selections. Here are two of them:

Jakoblind.no webpack configuration tool

Select main library, transpiler, styling extensions, images, and utilities to create your webpack.config.js and other related files such as README.md and package.json.

Create and edit webpack configuration file

Netlify webpack configuration tool

Netlify’s tool offers a wide selection of transpilers (Babel, JavaScript, TypeScript, CoffeeScript, Vue etc.) and CSS preprocessors (less, sass, stylus etc.) to automatically create your webpack.config.js file.

Create and edit webpack configuration file

Ned Sahin

Blogger for 20 years. Former Microsoft Engineer. Author of six books. I love creating helpful content and sharing with the world. Reach me out for any questions or feedback.

Leave a Comment