Webpack 01

Webpack Fundamentals – Pluralsight

CLI Commands

Building Multiple Files

How to use loaders with webpack.
Loaders are a way for us to process files, and if necessary, transform them into something else.

Going to add two pieces of functionality to our applications. We will use two different loaders
1. Lintng – JSHint will support our linting. It does is simply process each file looking for errors, and if it does it reports them out. Other than that it doesn’t change the filesl.
2. Support for ES6 – Babel will help us support ES6

These two loaders operate differently . What JSHint does is simply process each file looking for errors, and if it does it reports them out. Other than that it doesn’t change the files.
Babel will actually manipulate the files and turn them from ES6 into ES5.

Setup Package.json

login.es6

let login = (username, password) => {
 if(username != 'admin' || password !== 'radical'){
  console.log('incorrect login');
 }
}

login('admin', 'idunno')

Using Loaders

JSHint will not actually process as a loader, instead we want it to process as a pre-loader. The pre-loader all run before the loaders do. Which lets you do things like check your files for linting errors.

How to minimize and ugligy our code. We have to run webpack is to add the “-p” flag.

When go to production, but of course in a real system you will probably have a CI server that will automatially run your production build fo you, so it’s not a big deal. We solved the problem with minification, but we also may want ot use a different config file for production, say for example because we want to strip out some things from our code.

Strip-loader – It is a loader, which strip out certain things for us.

npm install strip-loader --save-dev

Create new config file specifically just for production. name the file as “webpack-production.cofig.js”.
This file itself is going to be an extension on to my config.js. I dont want to replace all the settigs inside of my config.js because most of these settings are just fine. And i really don’t want to duplicate them between the two files. Instead what i want is for “webpack-production” to be an extension on top of “webpack.config”. So in order to do that i’m going to use just a little bit of javascript trickery, and we will start that by grabbing our devConfig file, which we can do using the require statement.

var devConfig = require('./webpack.config.js')

webpack.config.js file was using the CommonJS format, so it’s just a module so we can require it from another file.

webpack.production.config.js

var devConfig = require('./webpack.config.js');
module.exports = devConfig;

If i simply say module.exports equals devConfig, then i have completely duplicated the functionality of the webpack.config file inside of my production file without having to duplicate any of the lines of code.

And at this point i can just make modifications to that. So i want to use the webpackstrip loader, i am going to bring that in up here by requiring it in and then after i have got a handle to my devConfig, I am going to modify it just a little bit. A variable “striploader” and it has three keys like any loader. The loader property WebpackStrip.loader(‘console.log’) will strip out the statements from our file. Now configured our strip loader, but i have not added it to my configuration for webpack. In order to add it , i have to take my devConfig and the module.loaders property is again an array “loders:[]”. So we can just do loaders.push and add in our “stripLoder”, and this production configuration file will now be just like the dev configuration file with the exception that it will also use the strip-loader.

http-server : node_module, which will just run a quick web server in the current directory. you can use through IIS, or you can install this using npm
npm install http-server -g

Check-List

Loaders : Loaders are third-party components which allow us to process and transform files.
Production Builds : Build a separate config file just for production without duplicating any of the code we’d already written inside of our devConfig file.

Organizing Files and Folders

context: path.resolve(‘js’)
What this does is sets a relative root director for the entry key.So now webpack is going to look for utils.js and app.js inside of the js directory.

“path: path.resolve(‘build/js’)” This tells webpack to put the bundle.js file into the build directory into the js subdirectory.

Next we need to webpack where the bundle.file is going to be served up from on the web server. We do this with a publicPath key, and we’ll set that to the directory where bundle is going to be on the web server, which is “publicPath: ‘/public/assests/js’. This matches the setting that we put into the index.html file where we told it where to look for the bundle.js file.

<html>
	<body>
		<!-- <script src="bundle.js"></script> -->
		<script src="/public/assets/js/bundle.js"></script>
	</body>
</html>

This setting applies to the webpack-dev-server so that it knows that the contents of build/js are actually going to be requested through the web server from “public/assets/js”. That way whenever a request comes in for “public/assest/js/” whatever, it will look for that file inside of the build/js directory.

I need to tell my web server that when somebody requests index.html from the root, it actually needs to look inside of the public directory, which is where the index.html file actually lives. So that’s a new key called devServer and we want to give it a contentBase property, and we give it the name of the directory to use as its base directory. So now any requests from the root are going to come out of public, and any request for “public/assets/js” are actually going to be served oiut of build/js. So we have given all of these directons to the dev web server.

devServer: {
contentBase: ‘public’
}

Working with ES6 Modules

If we’re going to use the web server, we can add the “-d”

$ webpack -d 

$ webpack-dev-server -d 

If we add the “-p”, it will minify the code

$ webpack-dev-server -d -p

Creating Multiple Bundles

console.log('Home Page JS loaded....')
console.log('About Page JS loaded....')
console.log('Contact Page JS loaded....')