{"id":38165,"date":"2017-10-02T23:01:54","date_gmt":"2017-10-02T15:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38165"},"modified":"2025-04-04T00:00:09","modified_gmt":"2025-04-03T16:00:09","slug":"webpack-introduction","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/","title":{"rendered":"Getting Started with Webpack [With Example Project]"},"content":{"rendered":"

Webpack<\/a><\/strong> is a module bundler<\/strong> that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it as its main build tool. Webpack is neither a package manager nor a task runner<\/strong> as it uses a different (more advanced) approach, but its goal is also to set up a dynamic build process<\/strong>.<\/p>\n

Webpack works with vanilla JavaScript. You can use it to bundle the static assets of an application<\/strong>, such as images, fonts, stylesheets, scripts into one single file while taking care of all the dependencies<\/strong>.<\/p>\n

You won\u2019t need Webpack to create a simple app or website, for instance one that has only one JavaScript and one CSS file and a few images, however it can be a life-saver for a more complex application with several assets and dependencies<\/strong>.<\/p>\n

Read Also:<\/strong> Getting Started with React.js<\/a><\/p>\n

\"Webpack<\/a><\/figure>\n

Webpack vs. task runners vs. Browserify<\/h2>\n

So, how does Webpack stack up compared to other build tools<\/strong> such as Grunt<\/a>, Gulp<\/a>, or Browserify<\/a>?<\/p>\n

Grunt and Gulp are task runners. In their config file, you specify the tasks<\/strong>, and the task runner executes them. The workflow of a task runner<\/strong> basically looks like this:<\/p>\n

\"Task<\/figure>\n

However, Webpack is a module bundler<\/strong> that analyzes the whole project, sets up a dependency tree<\/a><\/strong>, and creates a bundled JavaScript file<\/strong> that it serves to the browser.<\/p>\n

\"Webpack<\/figure>\n

Browserify is closer to Webpack than task runners, as it also creates a dependency graph<\/strong> but it does so only for JavaScript modules<\/strong>. Webpack goes one step further, and it doesn\u2019t only bundle source code but also other assets<\/strong> such as images, stylesheets, fonts, etc.<\/p>\n

If you want to know more on how Webpack compares to other build tools<\/strong>, I recommend you two articles:<\/p>\n

    \n
  1. Andrew Ray\u2019s Webpack: When to Use and Why<\/a><\/strong> on his own blog<\/li>\n
  2. Cory House\u2019s Browserify vs Webpack<\/a><\/strong> on freeCodeCamp (with awesome illustrations)<\/li>\n<\/ol>\n

    Four core concepts of Webpack<\/h2>\n

    Webpack has four main configuration options called \u201ccore concepts\u201d<\/a><\/strong> that you will need to define in the development process:<\/p>\n

      \n
    1. Entry<\/a><\/strong> \u2013 the starting point<\/strong> of the dependency graph (one or more JavaScript files).<\/li>\n
    2. Output<\/a><\/strong> \u2013 the file where you want the output to be bundled to<\/strong> (one JavaScript file).<\/li>\n
    3. Loaders<\/a><\/strong> \u2013 transformations on the assets that turn them into Webpack modules<\/a><\/strong> so that they can be added to the dependency graph<\/strong>. For instance, css-loader<\/code><\/a> is used for the import of CSS files.<\/li>\n
    4. Plugins<\/a><\/strong> \u2013 custom actions and functionalities performed on the bundle<\/strong>. For instance, the i18n-webpack-plugin<\/code><\/a> embeds localization into the bundle.<\/li>\n<\/ol>\n

      Loaders work on a per-file basis before the compilation takes place<\/strong>. Plugins are executed on the bundled code, at the end of the compilation process<\/strong>.<\/p>\n

      Install Webpack<\/h2>\n

      To install Webpack<\/strong>, open the command-line<\/a>, navigate to your project folder, and run the following command:<\/p>\n

      \r\nnpm init\r\n<\/pre>\n
      If you don\u2019t want to do the configuration yourself, you can make npm populate the package.json<\/code> file with the default values<\/strong> with the following command:<\/p>\n
      \r\nnpm init -y\r\n<\/pre>\n
      Next, install Webpack:<\/p>\n
      \r\nnpm install webpack --save-dev\r\n<\/pre>\n
      If you have used the default values this is how your package.json<\/code> file should look like now (the properties can be in a different order):<\/p>\n
      \r\n{\r\n  \"name\": \"_tests\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"webpack.config.js\",\r\n  \"dependencies\": {\r\n    \"webpack\": \"^3.6.0\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"webpack\": \"^3.6.0\"\r\n  },\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\"\r\n}\r\n<\/pre>\n
      Create the configuration file<\/h2>\n
      You need to create a webpack.config.js<\/code> file in the root folder of the project<\/strong>. This configuration file<\/a> has a central role, as this is where you will define the four core concepts<\/strong> (entry points, output, loaders, plugins).<\/p>\n
      The webpack.config.js<\/code> file holds a configuration object<\/strong> of which properties you need to specify. In this article, we will specify the four properties that correspond to the four core concepts<\/strong> (entry<\/code>, output<\/code>, module<\/code>, and plugin<\/code>), but the config object has other properties<\/a> as well.<\/p>\n
      1. Create the entry point(s)<\/h2>\n
      You can have one or more entry points<\/strong>. You need to define them in the entry<\/code> property.<\/p>\n
      Insert the following code snippet into the webpack.config.js<\/code> file. It specifies one entry point<\/strong>:<\/p>\n
      \r\nmodule.exports = {\r\n  entry: \".\/src\/script.js\"\r\n};\r\n<\/pre>\n
      To specify more than one entry points<\/a> you can use either the array or the object syntax<\/strong>.<\/p>\n
      In your project folder, create a new src<\/code> folder<\/strong> and a script.js<\/code> file inside it<\/strong>. This will be your entry point<\/strong>. For testing purposes, just place a string<\/strong> inside it. I used the following one (however, you can also use a more interesting one):<\/p>\n
      \r\nconst greeting = \"Hi. I'm a Webpack starter project.\";\r\ndocument.write(greeting);\r\n<\/pre>\n
      2. Define the output<\/h2>\n
      You can have only one output file<\/strong>. Webpack bundles all the assets into this file. You need to configure the output<\/code> property in the following way:<\/p>\n
      \r\nconst path = require(\"path\");\r\n\r\nmodule.exports = {\r\n  entry: \".\/src\/script.js\",\r\n  output: {\r\n    filename: \"bundle.js\",\r\n    path: path.resolve(__dirname, 'dist')\r\n  }\r\n};\r\n<\/pre>\n
      The filename<\/code> property defines the name of the bundled file<\/strong>, while the path<\/code> property specifies the name of the directory<\/strong>. The example above will create the \/dist\/bundle.js<\/code> file.<\/p>\n
      Although it\u2019s not compulsory, it\u2019s better to use the path.resolve()<\/code><\/a> method<\/strong> when you define the path<\/code> property, as it ensures accurate module resolution<\/a><\/strong> (the absolute path of the output is created according to different rules in different environments, module resolution solves this discrepancy). If you use path.resolve<\/code>, you need to require<\/em> the \npath<\/code> Node module<\/a><\/strong> at the top of the webpack.config.js<\/code> file.<\/p>\n
      3. Add the loaders<\/h2>\n
      To add the loaders<\/strong>, you need to define the module<\/code> property. Below, we add the babel-loader<\/code> that allows you to safely use the ECMAScript 6 features<\/a><\/strong> in your JS files:<\/p>\n
      \r\nconst path = require(\"path\");\r\n\r\nmodule.exports = {\r\n  entry: \".\/src\/script.js\",\r\n  output: {\r\n    filename: \"bundle.js\",\r\n    path: path.resolve(__dirname, 'dist')\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.js$\/,\r\n        exclude: \/(node_modules|bower_components)\/,\r\n        use: {\r\n          loader: \"babel-loader\",\r\n          options: { presets: [\"env\"] }\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n<\/pre>\n
      The config may seem difficult but it\u2019s just copy-pasted from Babel loader\u2019s documentation<\/a><\/strong>. Most loaders come with either a readme file or some kind of documentation, so you can (almost) always know how to configure them properly. And, the Webpack docs also have a page<\/a> that explains how to configure module.rules<\/code><\/strong>.<\/p>\n
      You can add as many loaders as you need<\/strong>, here\u2019s the full list<\/a>. Note that you also need to install each loader with npm<\/strong> to make them work. For the Babel loader, you need to install the necessary Node packages with npm:<\/p>\n
      \r\nnpm install --save-dev babel-loader babel-core babel-preset-env webpack\r\n<\/pre>\n
      If you have a look at your package.json<\/code> file, you\u2019ll see that npm added three Babel-related packages to the devDependencies<\/code> property<\/strong>, these will take care of the ES6 compilation.<\/p>\n
      4. Add the plugins<\/h2>\n
      To add the plugins<\/strong>, you need to specify the plugins<\/code> property. Plus, you also have to require<\/em> the plugins one by one<\/strong>, as they are external modules.<\/p>\n
      In our example, we add two Webpack plugins: the HTML Webpack plugin<\/a><\/strong> and the Preload Webpack plugin<\/a><\/strong>. Webpack has a nice plugin ecosystem<\/strong>, you can browse the full list here<\/a>.<\/p>\n
      To require the plugins as Node modules, create two new constants<\/strong>: HtmlWebpackPlugin<\/code> and PreloadWebpackPlugin<\/code> and use the require()<\/code><\/a><\/strong> function.<\/p>\n
      \r\nconst path = require(\"path\");\r\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\r\nconst PreloadWebpackPlugin = require(\"preload-webpack-plugin\");\r\n\r\nmodule.exports = {\r\n  entry: \".\/src\/script.js\",\r\n  output: {\r\n    filename: \"bundle.js\",\r\n    path: path.resolve(__dirname, 'dist')\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.js$\/,\r\n        exclude: \/(node_modules|bower_components)\/,\r\n        use: {\r\n          loader: \"babel-loader\",\r\n          options: { presets: [\"env\"] }\r\n        }\r\n      }\r\n    ]\r\n  },\r\n  plugins: [\r\n    new HtmlWebpackPlugin(),\r\n    new PreloadWebpackPlugin()\r\n  ]\r\n};\r\n<\/pre>\n
      Just like in the case of loaders, you also have to install the Webpack plugins with npm<\/strong>. To install the two plugins in the example, run the following two commands in your command line:<\/p>\n
      \r\nnpm install html-webpack-plugin --save-dev\r\nnpm install --save-dev preload-webpack-plugin\r\n<\/pre>\n
      If you check your package.json<\/code> file now, you\u2019ll see that npm added the two plugins to the devDependencies<\/code> property<\/strong>.<\/p>\n
      Run Webpack<\/h2>\n
      To create the dependency tree<\/strong> and output the bundle<\/strong>, run the following command in the command line:<\/p>\n
      \r\nwebpack\r\n<\/pre>\n
      It usually takes one or two minutes<\/strong> for Webpack to build the project. When finished, you\u2019ll see a similar message in your CLI:<\/p>\n
      \"Bundling<\/figure>\n
      If everything went right Webpack created a dist<\/code> folder<\/strong> in the root of your project and placed the two bundled files (bundle.js<\/code> and index.html<\/code>) inside it<\/strong>.<\/p>\n
      Github repo<\/h2>\n
      If you want to check out, download, or fork the whole project, have a look at our Github repo<\/a>.<\/p>\n
      Read Also:<\/strong> 11 Dependency Management Tools for Web Developers<\/a><\/p>","protected":false},"excerpt":{"rendered":"
      Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it as its main build tool. Webpack is neither a package manager nor a task runner as it uses a different (more advanced) approach, but its goal is also to set up a dynamic…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[510,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nGetting Started with Webpack [With Example Project] - Hongkiat<\/title>\n<meta name=\"description\" content=\"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Webpack [With Example Project]\" \/>\n<meta property=\"og:description\" content=\"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-02T15:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:00:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Getting Started with Webpack [With Example Project]\",\"datePublished\":\"2017-10-02T15:01:54+00:00\",\"dateModified\":\"2025-04-03T16:00:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/\"},\"wordCount\":1164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webpack-introduction\\\/01-webpack-bundler.jpg\",\"keywords\":[\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/\",\"name\":\"Getting Started with Webpack [With Example Project] - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webpack-introduction\\\/01-webpack-bundler.jpg\",\"datePublished\":\"2017-10-02T15:01:54+00:00\",\"dateModified\":\"2025-04-03T16:00:09+00:00\",\"description\":\"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webpack-introduction\\\/01-webpack-bundler.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webpack-introduction\\\/01-webpack-bundler.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webpack-introduction\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Webpack [With Example Project]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with Webpack [With Example Project] - Hongkiat","description":"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Webpack [With Example Project]","og_description":"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it","og_url":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-10-02T15:01:54+00:00","article_modified_time":"2025-04-03T16:00:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Getting Started with Webpack [With Example Project]","datePublished":"2017-10-02T15:01:54+00:00","dateModified":"2025-04-03T16:00:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/"},"wordCount":1164,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg","keywords":["Web Designers","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/","url":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/","name":"Getting Started with Webpack [With Example Project] - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg","datePublished":"2017-10-02T15:01:54+00:00","dateModified":"2025-04-03T16:00:09+00:00","description":"Webpack is a module bundler that facilitates building complex JavaScript applications. It has gained serious traction since the React community chose it","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/webpack-introduction\/01-webpack-bundler.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/webpack-introduction\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Webpack [With Example Project]"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9Vz","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38165"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38165\/revisions"}],"predecessor-version":[{"id":73477,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38165\/revisions\/73477"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38165"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}