#2023 Blog Star selection has started--becoming a city leader#
Table of contents
Getting started with webpack
Webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph that includes every module the application needs, and then packages all of these modules into one or more bundles.
getting Started
Before we start, we assume you already have Node.js and npm installed. Next, let's illustrate the basic concepts of webpack by creating a simple example project.
Install
First, we need to create a new folder as the root of the project. Open a command line in the root directory and enter the following command to initialize a new npm project:
npm init -y
Next, we need to install webpack and its CLI tools.
npm install webpack webpack-cli --save-dev
Create entry file
srcCreate a folder named in the root directory and a index.jsfile named inside it. This will be our entry point file, which is where webpack starts building the dependency graph.
// src/index.js
console.log('Hello, webpack!')
Create configuration file
Next, we need to create a webpack configuration file that tells webpack how to handle our project.
Create a file named in the root directory webpack.config.jsand add the following content:
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
This config file tells webpack where our entry point file is src/index.jsand where it should output dist/bundle.js.
build project
Now we can build the project. Enter the following command at the command line:
npx webpack
This will execute the webpack command and build the project using the configuration file we just created. If all goes well, you should be able to see "Hello, webpack!" output in the console.
Use npm scripts
In real projects, we usually use npm scripts to execute webpack commands instead of manually typing them on the command line.
Open package.jsonthe file, and add a buildscript as follows:
{
"scripts": {
"build": "webpack"
}
}Now we can build the project with the following command:
npm run build
Loader Loaders
Webpack itself only understands JavaScript modules, but loaders can make it recognize other types of files.
For example, if we want to import a CSS file in JavaScript, we need to use css-loaderand style-loader.
install loader
We can install css-loaderand style-loader.
npm install css-loader style-loader --save-devconfig loader
Add the following rule to your webpack config file to tell webpack how to handle CSS files:
module.exports = {
//...
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
This configuration tells webpack that when it encounters .cssa file ending with a , it will first css-loaderconvert the CSS into a JavaScript module using , and then style-loaderinsert it into the HTML using .
import CSS file
Now we can import the CSS file in JavaScript:
import './styles.css';
Webpack will automatically load CSS into the page.
Plugins
Loaders are responsible for handling various types of files, while plugins can be used to perform various tasks. For example, we can use to HtmlWebpackPluginautomatically generate an HTML file and automatically insert the output bundle into the HTML file.
install plugin
We can install using npm HtmlWebpackPlugin.
npm install html-webpack-plugin --save-dev
configure plugin
Add the following code to the webpack configuration file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'src/index.html'
})
]
};
This configuration tells webpack that we want to HtmlWebpackPluginautomatically generate HTML files using . We can also specify a template file and page title.
Create a template file
Create an HTML template file called in the src folder index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
This template file will serve as the basis for the generated HTML file.
build project
Now we can execute npm run buildthe command to build the project. If all goes well, you should be able to distsee the generated HTML and JavaScript files in the folder.
in conclusion
This article introduces the basic concepts of webpack, loaders and plugins, and demonstrates how to use them to build front-end projects through a simple sample project.
Webpack is a powerful tool that automatically handles dependencies and packages all files into one or more bundles. It can have a steep learning curve, but once the basic concepts are mastered, front-end projects can be developed very efficiently.