{"id":37,"date":"2018-09-10T23:08:29","date_gmt":"2018-09-10T23:08:29","guid":{"rendered":"https:\/\/kweaver.org\/cs\/mws-webpack-creating-a-new-mobile-website\/"},"modified":"2018-09-10T23:08:29","modified_gmt":"2018-09-10T23:08:29","slug":"mws-webpack-creating-a-new-mobile-website","status":"publish","type":"post","link":"https:\/\/kweaver.org\/cs\/mws-webpack-creating-a-new-mobile-website\/","title":{"rendered":"MWS – Webpack — Creating a new Mobile website"},"content":{"rendered":"

The MWS program was interesting and probably typical of what we would be asked to do in a job — take a very mobile unfriendly website and make it mobile \/ offline first.<\/p>\n

I'm going to build a "new" website, using the techniques we learned.  It won't be completely new as I will be using old data.<\/p>\n

They didn't mention optimizing websites and using tools like babble, to make them more mobile friendly.  Webpack is the latest tool to accomplish that, and I'm going to start with web pack first.<\/p>\n

The resources I've been looking at include:<\/p>\n

The official Docs<\/a><\/p>\n

Step by Step instructions for newbie<\/a> - this is what I am using below.<\/p>\n

Not really about Webpack but good stuff for later.<\/a><\/p>\n

I've created a Github repository at https:\/\/github.com\/kathweaver\/AmBRN-Mobile. Feel free to join the fun.<\/p>\n

The first thing to do is set up .gitgnore file so it will ignore node, Mac stuff, and Visual Studio stuff.  That's in my master branch <\/p>\n

Now I am switching to a branch called setup-webpack <\/p>\n

The next thing is to initialize npm, which adds a package.json file<\/p>\n

Then we install Webpack and the Webpack cli.  Note that you need to add –save-dev so that the dependency will be added to the package.json file.<\/p>\n

Next I configured Webpack.  Added a script in package.json and a configuration file.<\/p>\n

Finally I'm going to add some HTML from my old site and put it in the src directory.  Since I don't have any javascript code yet, I created an empty main.js. <\/p>\n

The build worked.  In theory now, anyone can download my repo and it will build in Webpack.  I'm committing this branch and working on the next part later.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The MWS program was interesting and probably typical of what we would be asked to do in a job — take a very mobile unfriendly website and make it mobile \/ offline first. I'm going to build a "new" website, using the techniques we learned.  It won't be completely new as I will be using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:attachment":[{"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kweaver.org\/cs\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}