{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack.js.org/issues/2469","repository_url":"https://api.github.com/repos/webpack/webpack.js.org","labels_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/2469/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/2469/comments","events_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/2469/events","html_url":"https://github.com/webpack/webpack.js.org/pull/2469","id":354108383,"node_id":"MDExOlB1bGxSZXF1ZXN0MjEwOTU5NTc2","number":2469,"title":"Added guide for simplest webpack commands","user":{"login":"msheliga1","id":30993559,"node_id":"MDQ6VXNlcjMwOTkzNTU5","avatar_url":"https://avatars3.githubusercontent.com/u/30993559?v=4","gravatar_id":"","url":"https://api.github.com/users/msheliga1","html_url":"https://github.com/msheliga1","followers_url":"https://api.github.com/users/msheliga1/followers","following_url":"https://api.github.com/users/msheliga1/following{/other_user}","gists_url":"https://api.github.com/users/msheliga1/gists{/gist_id}","starred_url":"https://api.github.com/users/msheliga1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/msheliga1/subscriptions","organizations_url":"https://api.github.com/users/msheliga1/orgs","repos_url":"https://api.github.com/users/msheliga1/repos","events_url":"https://api.github.com/users/msheliga1/events{/privacy}","received_events_url":"https://api.github.com/users/msheliga1/received_events","type":"User","site_admin":false},"labels":[{"id":413197331,"node_id":"MDU6TGFiZWw0MTMxOTczMzE=","url":"https://api.github.com/repos/webpack/webpack.js.org/labels/Guides","name":"Guides","color":"fef2c0","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-08-26T16:34:28Z","updated_at":"2018-11-01T00:59:19Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/webpack/webpack.js.org/pulls/2469","html_url":"https://github.com/webpack/webpack.js.org/pull/2469","diff_url":"https://github.com/webpack/webpack.js.org/pull/2469.diff","patch_url":"https://github.com/webpack/webpack.js.org/pull/2469.patch"},"body":"This is my first open source contribution so any feedback would be appreciated.  I signed the CLA and read the writer's guide.\r\n\r\nWhile I greatly appreciate the current Getting Started guide I found getting started with it to be most challenging. \r\n\r\nI have created a minimal setup guide that concentrates on the most basic webpack commands and features. (No lodash, npx or longer files). Featured are webpack entryfilename.js, webpack entryfilename.js -o dist/bundle.js --mode development, and an example with 3 bundled files.  Examining the bundled files and the use of development mode is discussed.  I tried to include lots of files and directory structures inside the examples.\r\n\r\nI linked to this guide in your current getting started guide, as I felt this material was best in a separate area.  \r\n\r\nIf you can use any or all of it great.  If not I understand - I'll at least have it on my gitHub site. I do feel it would help the learning curve for folks who are new to webpack.  Any suggestions or corrections would be welcome. \r\n\r\nMany Thanks,\r\n\r\nMike \r\n"},"comment":{"url":"https://api.github.com/repos/webpack/webpack.js.org/issues/comments/434896266","html_url":"https://github.com/webpack/webpack.js.org/pull/2469#issuecomment-434896266","issue_url":"https://api.github.com/repos/webpack/webpack.js.org/issues/2469","id":434896266,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNDg5NjI2Ng==","user":{"login":"msheliga1","id":30993559,"node_id":"MDQ6VXNlcjMwOTkzNTU5","avatar_url":"https://avatars3.githubusercontent.com/u/30993559?v=4","gravatar_id":"","url":"https://api.github.com/users/msheliga1","html_url":"https://github.com/msheliga1","followers_url":"https://api.github.com/users/msheliga1/followers","following_url":"https://api.github.com/users/msheliga1/following{/other_user}","gists_url":"https://api.github.com/users/msheliga1/gists{/gist_id}","starred_url":"https://api.github.com/users/msheliga1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/msheliga1/subscriptions","organizations_url":"https://api.github.com/users/msheliga1/orgs","repos_url":"https://api.github.com/users/msheliga1/repos","events_url":"https://api.github.com/users/msheliga1/events{/privacy}","received_events_url":"https://api.github.com/users/msheliga1/received_events","type":"User","site_admin":false},"created_at":"2018-11-01T00:59:18Z","updated_at":"2018-11-01T00:59:18Z","author_association":"NONE","body":"Hey folks,\n\nthanks for picking this up and running with it.  The main idea behind the\nexamples was to get folks help with installing\nand building the simplest example possible.  It then attempts to add some\nvery basic enhancements, such as a more realistic directory\nstructure.\n\nI'm not sure which \"getting started guide iirc\" the above is referring to.\nHowever, if it the one at https://webpack.js.org/guides/getting-started/,\nI found this getting started way, way more complex and much harder to learn\nfrom.  This is only my opinion, and others could differ.  Reasons\nI feel this way include that the first example of bundling in the getting\nstarted guide is over halfway down the page. I'm trying to show a basic\nexample ASAP.  The getting started guide depends upon loading additional\nstuff such as lodash.  And\nit shows an example of npx.  I'm not sure of all the nuances of npx, but\nwhen I was trying to learn npm, I was looking for a \"hello world\" example\nof npm.\n\nAgain, I appreciate your input and help.\n\nIt is up to you what you decide to do with this.  Please let me know if\nthere are specific changes or additional authorization you would need from\nme.\n\nMany Thanks,\n\nMike\n\nOn Sun, Oct 28, 2018 at 10:02 AM Eugene Hlushko <notifications@github.com>\nwrote:\n\n> *@EugeneHlushko* requested changes on this pull request.\n>\n> there are a lot of grammatical suggestion i can see and i am not native\n> speaker... After we remove duplication that we have vs starting guide, lets\n> then request native speaker review for the remaining text. Also the output\n> logs, they must only contain asset info.\n> ------------------------------\n>\n> In src/content/guides/getting-started.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749425>\n> :\n>\n> >  ---\n>\n>  Webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interface with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.\n>\n> +## Simple Examples\n> +\n> +Simple examples of using webpack can be found [here](/guides/minimal-startup)\n>\n> Please add trailing slash for dev env.\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749556>\n> :\n>\n> > @@ -0,0 +1,389 @@\n> +---\n> +title: Minimal Startup\n> +sort: 2\n> +contributors:\n> +  - msheliga1\n> +---\n> +\n> +This tutorial uses NPM, webpack and JavaScript to teach basic webpack.\n> +The webpack command is used to bundle and convert, or transpile, JavaScript modules.\n> +\n> +A minimal webpack example is first demonstrated. Progressively\n>\n> This doesnt sound right to me, what if we rephrase here into:\n> We will start by demonstrating basic examples and move forward to more\n> complex ones including: ....\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749599>\n> :\n>\n> > +\n> +Before running webpack it must be installed. This is almost always done using NPM. Hence NPM must be installed. This is normally done by installing Node.js which includes NPM by default. While full NPM details are not supported in this tutorial, it can be downloaded and installed at https://nodejs.org/. Once installed, reboot and verify that npm has been installed using \"npm -v\" which prints the version number (currently 5.6.0).\n> +\n> +Now create a new directory, change into it and use npm to install both webpack and webpack-cli (webpack's command line interface tool) globally.\n> +\n> +``` bash\n> +mkdir webpack-basics\n> +cd webpack-basics\n> +npm install webpack webpack-cli --global\n> +```\n> +\n> +### B. Minimal Webpack Command - webpack <entryFilename.js>\n> +\n> +The simpliest webpack command in the current version of webpack is \"webpack <entryFilename.js>\". Before issuing this command the <entryFilename.js> file must be created. This file will be named entryMain.js in this case.\n> +\n> +__webpack-basics/entryMain.js__\n>\n> please have empty lines between any text and code blocks\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749626>\n> :\n>\n> > +\n> +This tutorial uses NPM, webpack and JavaScript to teach basic webpack.\n> +The webpack command is used to bundle and convert, or transpile, JavaScript modules.\n> +\n> +A minimal webpack example is first demonstrated. Progressively\n> +more complex webpack features are introduced including:\n> +- examining webpacked files\n> +- using named output files\n> +- using development mode\n> +- using standard src and dist folders\n> +- packing multiple files\n> +\n> +## Part I. Minimal Webpack Example\n> +### A. Installation\n> +\n> +Before running webpack it must be installed. This is almost always done using NPM. Hence NPM must be installed. This is normally done by installing Node.js which includes NPM by default. While full NPM details are not supported in this tutorial, it can be downloaded and installed at https://nodejs.org/. Once installed, reboot and verify that npm has been installed using \"npm -v\" which prints the version number (currently 5.6.0).\n>\n> this is duplicating getting started guide\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749647>\n> :\n>\n> > +cd webpack-basics\n> +npm install webpack webpack-cli --global\n> +```\n> +\n> +### B. Minimal Webpack Command - webpack <entryFilename.js>\n> +\n> +The simpliest webpack command in the current version of webpack is \"webpack <entryFilename.js>\". Before issuing this command the <entryFilename.js> file must be created. This file will be named entryMain.js in this case.\n> +\n> +__webpack-basics/entryMain.js__\n> +``` JavaScript\n> +  console.log('Console.log message inside entryMain.js')\n> +```\n> +\n> +Now we can webpack this file.\n> +\n> +``` bash\n>\n> output logs must only contain assets, see other output logs on\n> webpack.js.org for more info\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749661>\n> :\n>\n> > +\n> +Hash: ae8ebe3170f4c6373946\n> +Version: webpack 4.17.1\n> +Time: 1660ms\n> +Built at: 2018-08-25 11:31:33\n> +  Asset       Size  Chunks             Chunk Names\n> +main.js  984 bytes       0  [emitted]  main\n> +Entrypoint main = main.js\n> +[0] ./entryMain.js 56 bytes {0} [built]\n> +\n> +WARNING in configuration\n> +The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.\n> +You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/\n> +```\n> +\n> +Congratulations, you have webpacked your first file!!!\n>\n> we do this in getting started guide iirc\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749744>\n> :\n>\n> > +<!DOCTYPE html>\n> +<html>\n> +\t<body>\n> +\t\t<br> <div> Webpack index.html Body Text with 3 Divs </div>\n> +\t\t<br> <div id=\"d1\">Para1 set in index.html</div>\n> +\t\t<br> <div id=\"d2\">Para2 set in index.html</div>\n> +\t\t<br> <div id=\"d3\">Para3 set in index.html</div>\n> +\t\t<br> <script src='./dist/bundle.js'></script>\n> +\t</body>\n> +</html>\n> +```\n> +\n> + Edit entry.js to include require statements and update the first div.\n> +\n> +__webpack-basics/src/entry.js__\n> +``` JavaScript\n>\n> ```javascript\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749763>\n> :\n>\n> > +\n> + Edit entry.js to include require statements and update the first div.\n> +\n> +__webpack-basics/src/entry.js__\n> +``` JavaScript\n> +require('./two.js')\n> +require('./three.js')\n> +console.log('Console message from entry.js')\n> +document.getElementById('d1').innerText='d1 set by entry.js'\n> +```\n> +\n> +Create two.js and thee.js in the src folder.  Edit them to include a console.log and an update of the divs.\n> +\n> +__webpack-basics/src/two.js__\n> +``` JavaScript\n> +console.log('Console message from two.js')\n>\n> examples are written with semicolons, and spaces for operators e.g. var b\n> = 1;\n> ------------------------------\n>\n> In src/content/guides/minimal-startup.md\n> <https://github.com/webpack/webpack.js.org/pull/2469#discussion_r228749815>\n> :\n>\n> > +\n> +__project__\n> +``` diff\n> +  webpack-basics\n> ++ |- dist\n> ++   |- main.js\n> +  |- entryMain.js\n> +```\n> +\n> +Note that a dist folder has been created inside your project folder. Change into it and confirm that a main.js file has been created. The dist folder is the default location for the bundled file and webpack created it automatically since it did not exist. Similarly webpack \"bundled: the entryMain.js file into a main.js file.  This can be seen in the output line: Entrypoint main = main.js.\n> +\n> +Open the bundled main.js file and observe that it consists of JavaScript code without line breaks. Much of the code will be unfamiliar, but you should be able to find the content of your entryMain.js file inside the main.js file at the end of the file.\n> +\n> +__webpack-basics/dist/main.js__\n> +``` JavaScript\n> +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&\"object\"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,\"default\",{enumerable:!0,value:e}),2&n&&\"string\"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,\"a\",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p=\"\",t(t.s=0)}([function(e,n){console.log(\"Console.log message inside entryMain.js\")}]);\n>\n> webpack's raw output is a subject to change with dep or and wrbpack's\n> updates, this is not really maintainable or useful snippet\n>\n> —\n> You are receiving this because you authored the thread.\n> Reply to this email directly, view it on GitHub\n> <https://github.com/webpack/webpack.js.org/pull/2469#pullrequestreview-169093277>,\n> or mute the thread\n> <https://github.com/notifications/unsubscribe-auth/Adjslw19m-Im2qEiir1TLkXolKWgO8sxks5upbj2gaJpZM4WM2Ou>\n> .\n>\n"}}
{"actor":{"display_login":"msheliga1"}}