I learned webpack in the afternoon yesterday, but I learned it from the video. At the beginning, I was a little dizzy. Then I took notes, and then I made it by myself according to the notes. This article is also written in accordance with a simple construction process. After reading it, those who do not understand can follow the process to build together and slowly combine the concept of point understanding.

1. Create a new folder, I’ll call it WebPack2. Then type in the VS terminal

npm init -y
Copy the code

When you type the command and press Enter, the resulting default package.json is initialized

2. Install the basic webPack environment file and enter it on the console

npm install webpack webpack-cli -D
Copy the code

After the installation is complete, there are two files in the WebPack2 folder: package.json and package-lock.json

3. Here we use jquery as an example, so we still need to install jquery

npm install jquery -S
Copy the code

4. Create a home page index.html and js file index.js index.html under this folder

<script src="./index.js"></script>
Copy the code

Then save the file directory as shown below

5. Therefore, we need to use the package in Webpack to parse the syntax in the index.js, and input it in the terminal

webpack index.js -o dist/bundle.js
Copy the code

An error message is displayed after the input is complete

6. Open the package.json file and find “script”

"start":"webpack index.js -o dist/bundle.js"
Copy the code

After processing index.js with webpack, -o means output to the bundle.js file in the newly created dist/ directory

npm run start
Copy the code

Now you can see that the bundle.js file in the dist directory has been generated. This is the js file that the browser can handle, so we need to go to the index.html and change the js file that was introduced in the script tag to

<script src="./dist/bundle.js"></script>
Copy the code

At this point we save and run the file again to see that it is in effect

npm run start 

npm install webpack-dev-server -D
Copy the code

After installation, modify the script custom instruction in package.json to

"start": "webpack-dev-server index.js -o dist/bundle.js"
Copy the code

Then we change the color of the single row to yellow in index.js

npm run start 

<script src="./bundle.js"></script>
Copy the code

We import the virtual bundle.js file in memory, and when we open our port page, we’ll see that it already works

ctrl
C 

"start": "webpack-dev-server index.js -o dist/bundle.js --open --port 8002"
Copy the code

–open –port 8002 –port 8002 –port 8002 –port 8002 –port 8002 –port 8002 –port 8002 Add a build directive after the script custom directive in package.json

"build": "webpack index.js -o dist/bundle.js"
Copy the code

After modification, the picture is as follows

10. It is not the best way to write the custom directive directly in package.json, so we will talk about a better way to create a new webpack.config.js configuration file in the webPack2 directory and write in it

var path = require('path');
module.exports = {
	entry:path.join(__dirname,'index.js'),
	output: {path:path.join(__dirname,'dist'),
		filename:'bundle.js',}}Copy the code

Js -o dist/bundle.js is written in the configuration file in a different way. After that, we will modify the custom instructions in the script of package.json to

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --config webpack.config.js --open --port 8002"."build": "webpack --config webpack.config.js"
  },
Copy the code

After saving, enter NPM run start in terminal, you can see the same effect as before, but this writing method is helpful for us to introduce other processing modules later, such as CSS-loader, style-loader, etc

11. Create a new index.css file in WebPack2 and write the code that sets the body background color, as shown in the figure below

import './index.css'
Copy the code

The CSS file is imported as a module, then we type NPM run start, we will find an error, why, because we do not have a CSS file processing module, so we need to install these modules on the terminal input

npm install css-loader style-loader -D
Copy the code

After installing these two modules, we have to import these two modules to handle them, so we need to write code in the webpack.config.js file to import and add

module: {rules:[
            {test:/.css$/.use: ["style-loader"."css-loader"]},]},Copy the code

Figure after adding

npm run start 

import './a.less'
Copy the code

NPM run start: NPM run start: NPM run start: NPM run start: NPM run start: NPM run start: NPM run start: NPM run start

npm install less-loader less -D
Copy the code

Then you need to modify the webpack.config.js configuration file and add it

{test:/.less$/.use: ["style-loader"."css-loader"."less-loader"]},
Copy the code

After modification, see figure

npm run start

Use htmlWebPackPlugin to install htmlWebPackPlugin, this software can automatically introduce you write JS files into your HTML home page, dynamic import first in the terminal input the following installation

npm install html-webpack-plugin -D
Copy the code

Then add the following code to the webpack.config.js configuration file

const HtmlWebpackPlugin = require('html-webpack-plugin');
Copy the code
plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./index.html'),
            filename:'index.html',})]Copy the code

Add location as shown in figure

<script src="./bundle.js"></script>
Copy the code

Save and run NPM start. Then you can see that the page is displayed normally. Press F12 to check the page and you can see the image shown below

14. Finally talk about the previous build custom orders, because these files are our development environment using the file, our project set up finally we don’t need so many useless to file and a module, so we build instructions is finally generating a page we just need to file, then we can only take the required, Reduce the waste of unnecessary space. We run NPM run build and see that the files we need to go live are generated in the dist directory, as shown