[ad_1]
Hi! In this tutorial, we’ll show you how to configure webpack to serve static files in your application. Additionally, you will learn:
First, let’s create the structure of the project.
Now let’s create a package.json file with the following command:
npm init -y
And now install the required packages.
npm install --save-dev webpack webpack-cli webpack-dev-server
According to the official documentation,
As of version 4.0.0, webpack no longer requires a config file to bundle your project. Nevertheless, it’s incredibly configurable to better suit your needs.
To configure webpack you need to create a configuration file in the root of your project.
touch webpack.config.js
I did it here using the command line (Ubuntu Terminal), but you can also do it using your favorite IDE or text editor. I’m using VS Code here:
this code index.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>Document</title>
<link rel="stylesheet" href="assets/styles/styles.css" />
</head>
<body>
<div class="container">
<div class="text-contents">
<h3 class="heading">Knowledge</h3>
<p class="paragraph">Update me!</p>
</div>
<img src="assets/images/bookshelf.png" alt="" />
</div>
</body>
</html>
and to this style.css:
.container {
display: grid;
padding: 15px;
justify-items: center;
align-content: center;
height: 100%;
}
.text-contents {
position: relative;
align-self: center;
justify-self: center;
color: #005f73;
background: url("../images/freedom.png") no-repeat center;
background-size: 80%;
width: 400px;
height: 200;
}
.heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.paragraph {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
}
p,
h1 {
margin: 0;
padding: 0;
}
img {
max-width: 50%;
}
Then you can drag and drop index.html File in your browser. It will be displayed in the following manner.
Configure webpack according to your needs. To do this, open your webpack.config.js file and add the following line:
module.exports = {}
When webpack starts, it looks for a configuration file (webpack.config.js). This file exports an object with all configurations.
The first property you need to add to that object is entry point:
module.exports = {
entry: "./app/assets/scripts/index.js",
};
Entry points indicate modules that webpack uses to start building internals dependency graphWebpack identifies other modules and libraries that your entry point depends on (directly When indirectly).
To better understand what the document says, replace this line with index.js:
import "../styles/styles.css";
because we are importing style.css, webpack will add that module to the dependency graph.that file is directly reliance.Well, inside style.css I had a file that looked like this:
@import "molules/_primary-nav.css";
of primary-nav.css the file is Indirect Due to dependencies index.css Dependent style.csswhich depends on _primary-nav.css.
Now you have to add output property:
const path = require("path");
module.exports = {
entry: "./app/assets/scripts/index.js",
output: {
path: path.resolve(__dirname, "app"),
filename: "bundle.js",
},
};
of output Properties are also objects. Configure its two properties. road When file name.
The first property specifies the output destination of the bundle and the second property is the name of the bundled file.I had to make it mandatory because it requires an absolute path roadis the core library of . Node.js.
Note: Specifies where to publish the bundle, but webpack won’t write it to disk unless you do so. It actually keeps bundles in memory to work faster.
Now you can start webpack-dev-server without configuration. You’ll get some errors that you’ll deal with immediately. To do this, package.json Open the file and add the following lines inside the script area.
"dev": "webpack serve"
Then open the VS Code terminal (Ctrl + j) and type:
npm run dev
Press Enter/Return and wait. The server won’t stop until you say so, and webpack will try to bundle and serve your content on localhost:8080 by default.
Due to incomplete configuration, accessing that address will result in a “Cannot GET /” message.
You should see something like this in your VS Code terminal:
Webpack warns us that we haven’t setup mode option. To fix this, set the mode to “development”.
const path = require("path");
module.exports = {
entry: "./app/assets/scripts/index.js",
output: {
path: path.resolve(__dirname, "app"),
filename: "bundle.js",
},
mode: "development"
};
Stop the server (Ctrl + c), save the file, and start it again.
This is what I get now:
We will fix this in the next section. Take a break, grab a coffee and come back if you need to.
Handling CSS files
Ready? Let’s code!
By default webpack only recognizes .js files. So we need to install some loaders to make it work with CSS. The configuration file is module object:
const path = require("path");
module.exports = {
entry: "./app/assets/scripts/index.js",
output: {
path: path.resolve(__dirname, "app"),
filename: "bundle.js",
},
mode: "development",
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
Don’t forget to install the package running this:
npm install --save-dev style-loader css-loader
Stop and restart the server. The terminal shows:
devServer configuration
Before setting up webpack-dev-server add this line inside index.html:
<script src="./bundle.js"></script>
end
