Installing webpack and webpack-CLI (2019.6 first edit, )

1.

check version:

node -v 

npm -v

The tilde ~ matches the most recent patch version (the third number) for the specified minor version (the second number).
~1.2.3 will match all 1.2.x versions but will hold off on 1.3.0.

The caret ^ is more relaxed. It matches the most recent minor version (the second number) for the specified major version (the first number).
^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0.

---------

npm init [after this the package.json file will show up]

npm install webpack@4.28.4 --save-dev

npm install webpack-cli@3.2.1 --save-dev

2.

under start folder:

npm install  [install all the dependency]

npm install jquery --save [install jquery]

 To generate the main.js file:

1. run webpack from local packages

2. OR: run npx webpack --mode production | development

 

webpack.config.js

// import path from 'path'
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

run 'npx webpack'

 

 

make 'npm run build' to run webpack

{
  "name": "webpack-basic",
  "version": "1.0.0",
  "description": "Learning all about webpack 4",
  "main": "index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack -w"
  },
  "keywords": [
    "webpack",
    "preprocessing",
    "react"
  ],
  "author": "Eve Porcello",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

 

Webpack loader

Babel

 

- [Instructor] To set up the babel-loader, we'll need to take a few steps. Let's go to our terminal and we're going to, install babel-loader and also @babel/core and we're going to save these to our dev dependencies. Babel-loader is the loader, babel/core is the actual babel packagethat handles the transformations. And both are going to be added to our package json. Next we're going to need to adjust the webpack.config. We're going to add another key here called module and we're going to add another called rules.

The next thing we want to do here is add an object and we're going to add a test key. Now this test key is going to say that whenever a JavaScript file is found, babel should transpile it.We can also define an optional key for exclude and this is just going to say don't run babel on the node modules folder 'cause that will take a long time. And finally we're going to add another object here called use and we're going to say that this should use the babel-loader.

Perfect. So let's go ahead and run our build command which will run webpack and even though it looks like some transpiling has occurred, nothing is really happening yet. This is actually what we should expect at this point because we need to add one other step to this.We need to define some rules around what should be transformed here. So, we're going to make some additional changes to handle these transformations.

 

 [Instructor] To actually transform the code, we need to use a preset. In the most recent versions of Babel, we use babel/preset-env, which compiles our code to compatibility with most browsers. To learn more about the methodology behind this, you can check out the documentation at this link here under babel/preset-env. Next let's install this package using npm. We'll say, npm install @babel/preset-env. And then let's save this to our dev dependencies.

At this point, we can go back to our webpack.config file and we're going to add on to our loader. So we'll say options. And then we're going to add this presets array. The array at this point will have just @babel/preset-env. So at this point, we can run npm run build. This is going to run this with the watch, and it's going to compile everything to the standards of preset-env, which basically means most every browser is going to be supported here.

If you want to customize this further, you can use the Browserlist integration and you can be very granular and specific about which browsers you want to target. However, preset-env will capture most everything that we need to optimize for.

 

React

- [Instructor] Let's make some adjustments to our project to use React instead of jQuery. The first step I'm going to take, is to install React and React dom as dependencies using the save flag, then I'm going to go back to my Index JS file, and I'm going to replace this code with the following, so I'm import React from react, I also will render from react dom, and I'm just going to create a simple component here called Greeting, which returns an H one, and this H one should say "Hello from React." Finally, we want to render this, and remember we have that element called Target that we can mount this to, so I'll say that the greeting should be our component that is added to the dom at Target.

Perfect. So now to use React web pack and Babel together. I need to install that one last preset, so I'll say N-P-M install at Babel slash preset hyphen React, and I'll save that as a dev dependency. Excellent. At this point, I'm going to go back to the code and open the webpack in config file. I know need to add my additional preset here, so at Babel slash preset React,and another requirement here, is I need to add a file to the root, so I'm going to add this to our Start folder and it's going to be called Dot Babel RC.

SO this is another configuration file that lists which of the Babel presets that we're using.We're going to add a key here call Presets and it should say at Babel slash preset React and at Babel preset env. Excellent. So at this point, I can run this and remember our component here reads "Hello from React," so if everything works okay, we should see that in our browser.

Let's go ahead and run our build. That seems like a pretty successful message. If I hit refresh, we should see Hello from React. Excellent. So just to recap, we have added the Babel preset React command, we've added it to the webpack config, and we've added a Babel RC, and now we can use JSX with abandon in all our projects.

 

 Loading Assets

CSS

 

[Instructor] In addition to loading JavaScript with Webpack, we can load CSS, Sass, and Lessto style our pages. The benefit of loading CSS as a module like this is that Webpack will only bundle the styles that our app uses. We can also require or import styles for use in certain files and it will perform transformations on Sass and Less to turn it into CSS. So let's first create a simple style sheet with some simple styles. I'm going to go to the source folder and create a new file called style.css.

Now, in this file, I'm going to create a simple selector for an h1 and this h1 should have a font family of Arial. It also should have color salmon, a nice pink HTML color there. All right, so over in our index JS, we want to import this. So we'll just say import style.css, perfect. Now in order to import this and load it we need a loader. So we're going to say npm install style-loader and css-loader and we're going to save these to our dev dependencies.

Now finally, we want to go back to our webpack config file, and in the webpack config, we need to define another rule. So we have our babble loader going on here, that's all good. But we need to add another neighboring object, which is going to look for any css files and transform them. So let's add a test key, we then will look for any css files, .css. We also want to add a use.

So use is going to be in red, and we can add any loaders that we want to use here. So loader, style-loader and loader, css-loader, perfect. So now if I take this over and I run npm run build,we should see that this bundles this up. Notice that our style.css has been bundled. And if we hit refresh, we should see all of our styles being applied.

So this is a quick way to add a little bit of styling to our react component, to our Java script file,simply by using the style-loader and the css-loaders from webpack.

 

Loading images