{"id":7289,"date":"2019-07-07T19:30:23","date_gmt":"2019-07-07T19:30:23","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7289"},"modified":"2019-07-07T19:30:23","modified_gmt":"2019-07-07T19:30:23","slug":"adding-webpack-dev-server","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/adding-webpack-dev-server\/","title":{"rendered":"Adding webpack-dev-server"},"content":{"rendered":"<p>In previous posts we&#8217;ve used <em>serve<\/em> as our server, an alternative is the <em>webpack-dev-server<\/em>. This will give up live reloading and also built-in compilation so that we don&#8217;t need to run the build script. <\/p>\n<p>Simply add the relevant package using<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nyarn add webpack-dev-server -D\r\n<\/pre>\n<p>Now add the following to your webpack.config.js, first the requires<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst path = require('path');\r\n<\/pre>\n<p>and now the code for the server<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nmodule.exports = {\r\n  \/\/ ... other config\r\n  devServer: {\r\n    contentBase: path.join(__dirname, 'dist'),\r\n    compress: true,\r\n    port: 5000\r\n<\/pre>\n<p>By default &#8220;Live reloading&#8221; is enabled and hence, now when we make changes to our code and save them, the browser automatically relaods. <\/p>\n<p>We can now just change our &#8220;start&#8221; script within package.json to <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&quot;start&quot;: &quot;webpack-dev-server --config config\/webpack.config.js&quot;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In previous posts we&#8217;ve used serve as our server, an alternative is the webpack-dev-server. This will give up live reloading and also built-in compilation so that we don&#8217;t need to run the build script. Simply add the relevant package using yarn add webpack-dev-server -D Now add the following to your webpack.config.js, first the requires const [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[257],"tags":[],"class_list":["post-7289","post","type-post","status-publish","format-standard","hentry","category-webpack"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7289"}],"version-history":[{"count":1,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7289\/revisions"}],"predecessor-version":[{"id":7290,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7289\/revisions\/7290"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}