Before installing webpack, we need to install node first, because webpack is built on node JS.
1. Install node js
Use node JS the latest long term support Version (LTS - Long Term Support) is an ideal start. With older versions, you may encounter various problems because they may lack webpack functionality or related package s.
Node download address - node JS official website
(mac may download. pkg files, windows may download. exe or. msi files)
The next step is to follow the operating steps and click next to install. After the installation is completed, we can view the current node and npm versions on the vscode console (npm - node package manager will be installed with node installation)
2. Install webpack and webpack cli
We can use global installation or local installation
2.1. Global installation
During global installation, we can use global -- global to install,
npm install webpack webpack-cli --global
In this way, webpack can be used in any file directory
After installation, we can view the currently installed version of webpack
However, the global installation will lock your webpack to a certain version, and errors may occur due to version problems during project construction. In addition, during team collaboration, you have installed webpack globally, but other small partners do not know that the project needs to be installed globally. At this time, your project will make mistakes.
Therefore, the global installation of webpack is not recommended.
2.2 local installation
We can initialize it first
npm init -y
Generate a package. In our directory JSON file, and then we use -- save dev to install it locally
npm install webpack webpack-cli --save-dev # Or specify the version npm install webpack@<version> --save-dev
After the local installation, we can use the npx command. The npx command will find out whether to install under the current file directory. If not, we will find out whether to install in the upper directory.
If you want to see webpack related commands, you can use
npx webpack --help
3. Basic packaging
We build four files under the current file, including webpack config. The JS file name is webpack, which automatically helps us to read, so it can't be named casually. At the same time, it is in node JS, so we use common JS.
hello.js
function hello(){
console.log("hello")
}
export default hello
index.js
import hello from './hello' hello()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./hello.js"></script>
<script src="./index.js"></script>
</body>
</html>
webpack.config.js
const path = require('path')
module.exports = {
/* Entry file */
entry : './src/index.js',
output : {
/* Specifies the file name of the output file */
filename:'bundle.js',
/* path Absolute path must be used */
/* Specifies the path to the output file */
path:path.resolve(__dirname,'./dist')
},
/* Do not define the development or production environment for the time being */
mode : 'none'
}
We use npx webpack for packaging
npx webpack
You can see that there is a dist folder under the current file directory, which contains a packaged bundle js
Let's modify the index HTML file import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
Then open the current html file in the browser and you can see that the console prints hello, indicating that the basic webpack we configured is OK
