{"id":1625,"date":"2016-12-08T07:46:31","date_gmt":"2016-12-08T07:46:31","guid":{"rendered":"http:\/\/cloudkul.com\/blog\/?p=1625"},"modified":"2017-06-14T11:33:37","modified_gmt":"2017-06-14T11:33:37","slug":"npm-webpack-installation","status":"publish","type":"post","link":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/","title":{"rendered":"npm-webpack Installation"},"content":{"rendered":"

With this small blog we tried to introduce npm, webpack and few more libraries that might necessary with these packages and solve error that came while installing webpack. So, starting with basic \ud83d\ude42<\/span><\/span><\/span><\/p>\n

What is npm?<\/b><\/span><\/span><\/span><\/p>\n

Node Package Manager <\/span>(<\/span>NPM<\/span><\/b>) provides Online repositories for node.js packages\/modules and Command line utility to install Node.js packages, do version management and dependency management of Node.js packages.<\/span><\/span><\/span><\/span><\/p>\n

What is webpack?<\/b><\/span><\/span><\/span><\/p>\n

Webpack <\/span>is a <\/span>module<\/span> bundle<\/span>r, it<\/span> <\/b>takes modules with dependencies and generates static <\/span>value<\/span> representing those modules.<\/span><\/span><\/span><\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\"npm-webpack\"<\/a><\/p>\n

To install node js and npm<\/b><\/span><\/span><\/span><\/p>\n

sudo apt-get update\r\n\r\nsudo apt-get install nodejs<\/pre>\n
or nodejs can be installed from https:\/\/nodejs.org\/en\/<\/p>\n
sudo apt-get install npm<\/pre>\n
to install webpack<\/b><\/p>\n
npm install webpack -g<\/pre>\n
O<\/span><\/span><\/span>n implementing any plugin <\/span><\/span><\/span>if <\/span><\/span><\/span>we are <\/span><\/span><\/span>receiv<\/span><\/span><\/span>ing<\/span><\/span><\/span>\u00a0below error <\/span><\/span><\/span>or webpack – extrack-text-webpack-plugin cannot find module<\/span><\/span><\/span><\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\"weppck-err\"<\/a><\/p>\n
check whether webpack properly install or not if not then install it locally:<\/span><\/span><\/span><\/p>\n
npm install webpack<\/pre>\n
then run<\/p>\n
npm i extract-text-webpack-plugin<\/pre>\n
this will Extract text from bundle into a file.<\/p>\n
Then run,(this part is optional)<\/span><\/span><\/span><\/p>\n
npm i node-sass<\/pre>\n
node-sass is a library that provides binding for Node.js to LibSass<\/span><\/span><\/span>\u00a0, <\/span>It allows us to natively compile .scss files to css speedly and automatically via a connect middleware.<\/span><\/span><\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0CONTACT US IN CASE OF ANY QUERY<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
With this small blog we tried to introduce npm, webpack and few more libraries that […]<\/a><\/p>\n","protected":false},"author":9,"featured_media":1629,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"yoast_head":"\nnpm-webpack Installation - Cloudkul<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"npm-webpack Installation - Cloudkul\" \/>\n<meta property=\"og:description\" content=\"With this small blog we tried to introduce npm, webpack and few more libraries that [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudkul\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-08T07:46:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-14T11:33:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2016\/12\/npm-webpack-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"848\" \/>\n\t<meta property=\"og:image:height\" content=\"422\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"sanchita sengupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/\",\"url\":\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/\",\"name\":\"npm-webpack Installation - Cloudkul\",\"isPartOf\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/#website\"},\"datePublished\":\"2016-12-08T07:46:31+00:00\",\"dateModified\":\"2017-06-14T11:33:37+00:00\",\"author\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/3f234c864fed11b27f2107ff62404537\"},\"breadcrumb\":{\"@id\":\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"npm-webpack Installation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#website\",\"url\":\"https:\/\/cloudkul.com\/blog\/\",\"name\":\"Cloudkul\",\"description\":\"Host your eCommerce Store on AWS with Optimized Performance\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudkul.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/3f234c864fed11b27f2107ff62404537\",\"name\":\"sanchita sengupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/161a19864296b3d9c2a1146b7501c225?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/161a19864296b3d9c2a1146b7501c225?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g\",\"caption\":\"sanchita sengupta\"},\"sameAs\":[\"http:\/\/cloudkul.com\/blog\"],\"url\":\"https:\/\/cloudkul.com\/blog\/author\/sanchita-sengupta138\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"npm-webpack Installation - Cloudkul","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:\/\/cloudkul.com\/blog\/npm-webpack-installation\/","og_locale":"en_US","og_type":"article","og_title":"npm-webpack Installation - Cloudkul","og_description":"With this small blog we tried to introduce npm, webpack and few more libraries that [...]","og_url":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/","og_site_name":"Cloudkul","article_published_time":"2016-12-08T07:46:31+00:00","article_modified_time":"2017-06-14T11:33:37+00:00","og_image":[{"width":848,"height":422,"url":"https:\/\/cloudkul.com\/blog\/wp-content\/uploads\/2016\/12\/npm-webpack-1.png","type":"image\/png"}],"author":"sanchita sengupta","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/","url":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/","name":"npm-webpack Installation - Cloudkul","isPartOf":{"@id":"https:\/\/cloudkul.com\/blog\/#website"},"datePublished":"2016-12-08T07:46:31+00:00","dateModified":"2017-06-14T11:33:37+00:00","author":{"@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/3f234c864fed11b27f2107ff62404537"},"breadcrumb":{"@id":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cloudkul.com\/blog\/npm-webpack-installation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"npm-webpack Installation"}]},{"@type":"WebSite","@id":"https:\/\/cloudkul.com\/blog\/#website","url":"https:\/\/cloudkul.com\/blog\/","name":"Cloudkul","description":"Host your eCommerce Store on AWS with Optimized Performance","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudkul.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/3f234c864fed11b27f2107ff62404537","name":"sanchita sengupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/161a19864296b3d9c2a1146b7501c225?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/161a19864296b3d9c2a1146b7501c225?s=96&d=https%3A%2F%2Fs.gravatar.com%2Favatar%2F6148c37469011bc2f8e491ca8f5de495%3Fs%3D80&r=g","caption":"sanchita sengupta"},"sameAs":["http:\/\/cloudkul.com\/blog"],"url":"https:\/\/cloudkul.com\/blog\/author\/sanchita-sengupta138\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/1625"}],"collection":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/comments?post=1625"}],"version-history":[{"count":5,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/1625\/revisions"}],"predecessor-version":[{"id":1633,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/posts\/1625\/revisions\/1633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/media\/1629"}],"wp:attachment":[{"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/media?parent=1625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/categories?post=1625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudkul.com\/blog\/wp-json\/wp\/v2\/tags?post=1625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}