Typos

Author: cassiozen

materials/appendixA/index.html

@@ -120,7 +120,7 @@ <h2 id="howdoes">How does Webpack compare to build tools such as Grunt and Gulp?
 
       <p>Build tools such as Grunt and Gulp work by looking into a defined path for files that match your configuration. In the configuration file you also specify the tasks and steps that should run to transform, combine and/or minify each of these files. <br /> <img src="images/picture1.png" width="800" /></p>
 
-      <p>Webpack, instead, analyzes your project as a whole. Given a starting main file, Webpack looks through all of your project's dependencies (by following require and import statements in JavaScript), process them using loaders and generate a bundled JavaScript file.<br /> <img src="images/picture2.png" width="656"/></p>
+      <p>Webpack, instead, analyzes your project as a whole. Given a starting main file, Webpack looks through all of your project's dependencies (by following require and import statements in JavaScript), processes them using loaders and generates a bundled JavaScript file.<br /> <img src="images/picture2.png" width="656"/></p>
 
       <p>Webpack's approach is faster and more straightforward. And, as you will see later in this chapter, opens lots of new possibilities for bundling different file types.</p>
 
@@ -147,9 +147,9 @@ <h2 id="sampleproject">Sample project</h2>
 
       <p><pre><code class="bash">npm install --save-dev webpack</code></pre></p>
 
-      <p>With the project set up and webpack installed, let's move on to the project structure, which will consist of two folders: an "app" folder for original source code / JavaScript modules, and a "public" folder for files that are ready to be used in the browser (which include the bundled JavaScript file generated by Webpack, as well as an index.html file). You will create three files: An index.html file on the public folder and two JavaScript files on the app folder: main.js and Greeter.js. At the end, the project structure will look like the image below:<br /><img src="images/picture3.png" width="175"/></p>
+      <p>With the project set up and webpack installed, let's move on to the project structure, which will consist of two folders: an "app" folder for original source code / JavaScript modules, and a "public" folder for files that are ready to be used in the browser (which include the bundled JavaScript file generated by Webpack, as well as an index.html file). You will create three files: An index.html file on the public folder and two JavaScript files on the app folder: main.js and Greeter.js. In the end, the project structure will look like the image below:<br /><img src="images/picture3.png" width="175"/></p>
 
-      <p>The index.html will contain a pretty basic HTML page, whose only purpose is load the bundled JavaScript file:</p>
+      <p>The index.html will contain a pretty basic HTML page, whose only purpose is to load the bundled JavaScript file:</p>
       <p><pre><code>
 &lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;en&quot;&gt;
@@ -165,7 +165,7 @@ <h2 id="sampleproject">Sample project</h2>
 &lt;/html&gt;
       </code></pre></p>
 
-      <p>Next, you will head to the JavaScript files: main.js and Greeter.js. The Greeter.js is simply a function that returns a new HTML element with a greeting message. The main.js file will require the Greeter and insert the returned element on the page.</p>
+      <p>Next, you will head to the JavaScript files: main.js and Greeter.js. The Greeter.js is simply a function that returns a new HTML element with a greeting message. The main.js file will insert the HTML element returned by the Greeter module in the page.</p>
 
       <p class="code-caption">The main.js source code:</p>
       <p><pre><code>
@@ -184,7 +184,7 @@ <h2 id="sampleproject">Sample project</h2>
       </code></pre></p>
 
       <div class="note">
-        <p><strong>Note:</strong> Throughout the book, the recently standardized ES6 module definition was used. In it's current version, though, Webpack only supports the commonJS module definition out of the box (i.e. require). Using ES6 modules with webpack will be covered later in this appendix.</p>
+        <p><strong>Note:</strong> Throughout the book, the recently standardized ES6 module definition was used. In its current version, though, Webpack only supports the commonJS module definition out of the box (i.e. require). Using ES6 modules with webpack will be covered later in this appendix.</p>
       </div>
 
 
@@ -261,7 +261,7 @@ <h2 id="generatingsource">Generating source maps</h2>
 
       <p>There is a handful of options for configuring Webpack - Let's get started with one of most important and used ones: Source Maps.</p>
 
-      <p>While packing together all of your project's JavaScript modules into one (or a few) bundled file to use on the browser present a lot of advantages, one clear disadvantage is that you won't be able to reference back your original code in their original files when debugging in the browser - It becomes very challenging to locate exactly where the code you are trying to debug maps to your original authored code. However, Webpack can generate source maps when bundling - A source map provides a way of mapping code within a bundled file back to it's original source file, making the code readable and easier to debug in the browser.</p>
+      <p>While packing together all of your project's JavaScript modules into one (or a few) bundled file to use on the browser presents a lot of advantages, one clear disadvantage is that you won't be able to reference back your original code in their original files when debugging in the browser - It becomes very challenging to locate exactly where the code you are trying to debug maps to your original authored code. However, Webpack can generate source maps when bundling - A source map provides a way of mapping code within a bundled file back to its original source file, making the code readable and easier to debug in the browser.</p>
 
       <p>To configure Webpack to generate source maps that points to the original files, use the "devtool" setting with one of the following options:</p>
 
@@ -289,7 +289,7 @@ <h2 id="generatingsource">Generating source maps</h2>
             <p><strong>cheap-module-source-map</strong></p>
           </td>
           <td>
-            <p>Generate source map in a separate file without column-mappings. Stripping the column mapping favors a better build performance introducing a minor inconvenient for debugging: The browser developer tools will only be able to point to the line of the original source code, but not to a specific column (or character).</p>
+            <p>Generate source map in a separate file without column-mappings. Stripping the column mapping favors a better build performance introducing a minor inconvenience for debugging: The browser developer tools will only be able to point to the line of the original source code, but not to a specific column (or character).</p>
           </td>
         </tr>
         <tr>
@@ -336,7 +336,7 @@ <h2 id="generatingsource">Generating source maps</h2>
 
       <h1 id="webpackdevelopment">Webpack Development Server</h1>
 
-      <p>Webpack has an optional server for local development purposes. It is a smallnode.js expressapp that serves static files and build your assets according to your webpack configuration, keeping them in memory, and doing so automatically refreshing the browser as you change your source files. It's a separate npm module that should be installed as a project dependency:</p>
+      <p>Webpack has an optional server for local development purposes. It is a smallnode.js expressapp that serves static files and builds your assets according to your webpack configuration, keeping them in memory, and doing so automatically refreshing the browser as you change your source files. It's a separate npm module that should be installed as a project dependency:</p>
 
       <p><pre><code class="bash">npm install --save-dev webpack-dev-server</code></pre></p>