6.1.1: Webpack with Local Modules

Search…
Introduction
Pre-compiling front-end code with Webpack affords secondary benefits, including ability to use import statements. import gives us a few benefits.
1.Import gives us finer-grained control about how our code is run. Previously, the order of HTML script tags determined the order of the JavaScript code execution.
2.Each imported module is a separate namespace from others- the files do not interact unless explicitly programmed to.
3.In Module 6.1.2: Webpack with NPM Modules we will learn how to use 3rd-party NPM libraries which can be imported using import.
Webpack claims its main feature is "module bundling". Read more about this functionality here: https://webpack.js.org/concepts/.
Webpack Import Order of Events
Webpack will transform our source JS files connected by import statements into a single output file that contains all dependencies that the imports reference.
1.The webpack command is run.
2.Webpack reads an import statement in the source script.js file.
3.Based on the import, Webpack retrieves all dependency code. If the imported module depends on other modules, Webpack retrieves those modules too.
4.Webpack writes the compiled file into the dist directory.
5.The server is started with node index.js. A request is made to the server. The server responds with the compiled JS file in dist.
webpack setup (super simple, no config file)
Create a new directory (line 1), initialize npm (line 3), and install webpack (line 4).
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack webpack-cli
Create src folder inside our newly created directory (webpack-demo).This is where all our files will live.
mkdir src
Create and add 3 files,index.js,cat.js and mouse.js to src folder. webpack's default entry point is the index.js file in the src folder.
// cat.js
export let cat = 'Tom';
// mouse.js
export let mouse = 'Jerry';
// index.js
​
console.log('This is from index.js');
Create a file called index.html and add it to the root directory.
// index.html
​
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack Demo</title>
  </head>
  <body>
    <h1>Webpack Demo</h1>
    <script src="./src/index.js"></script>
  </body>
</html>
If you open index.html in the browser, you should see in the console:
This is from index.js
Next, import the 2 files, cat.js and mouse.js into index.js
// index.js
​
import { cat } from './cat.js';
import { mouse } from './mouse.js';
​
console.log('This is from index.js');
console.log('This is imported from cat.js', cat);
console.log('This is imported from mouse.js', mouse);
Now, enter the command npx webpack in the terminal. Adding "build": "webpack" to scripts in package.json and running npm run build will also do the same thing. You should see something like this in dist/main.js:
Note that webpack has created a folder called dist, which contains a file called main.js. This file contains the processed code from index.js.
Next, change the script tag in index.html to <script src="./dist/main.js"><script>, to reference the new file that webpack has created for us.
You should see the console.logs when you open index.html in your browser
Adding webpack.config.js file
Up till now, webpack has run pretty much automatically without any input from us.
We can create a config file (e.g., webpack.config.js ) that allows us to tell webpack what to do.
We will start with entry and output.
entry (line 5): refers to the entry point (the file that webpack starts reading from).
output (line 6): refers to where webpack will put the processed code (line 8) and what the file will be called (line 7). In this case, the file (randomName.js) will be put in a directory called RANDOM(The directory will be created if it does not exist). Usually we stick with convention and put a file called main.js in a folder called dist
// webpack.config.js
const path = require('path');
​
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'randomName.js',
    path: path.resolve(__dirname, 'RANDOM'),
  },
};
path.resolve - resolves an absolute path to the directory called RANDOM
We are also able to specify the mode we want webpack to run in, production or development (line 5). If unspecified, the default mode is production. The code generated in production mode is minified, while the code generated in development mode is more human readable and includes comments from webpack.
// webpack.config.js
const path = require('path');
​
module.exports = {
  mode: 'development', // or "production"
  entry: './src/index.js',
  output: {
    filename: 'randomName.js',
    path: path.resolve(__dirname, 'RANDOM'),
  },
};
Production Mode
The production mode option for Webpack CLI tells Webpack to use specific "production" transformations. Read how to use mode here. Read what "production" mode enables here.
For instance, one benefit of production mode is that it enables "module concatenation", an optimization that helps our bundled dependencies execute faster. Read more here.
We will rarely need to configure Webpack from scratch, because usually someone on the team has done it already. No need to understand all the details of Webpack configuration at the moment.
6.1: Webpack
6.1.2: Webpack with NPM Modules
Last modified 3mo ago
Copy link
Outline
Introduction
Webpack Import Order of Events
webpack setup (super simple, no config file)
Adding webpack.config.js file
Production Mode