Commonly used instructions

  • npm install == npm i
  • npm install –save == npm i -S
  • NPM insall –save-dev == NPM I -d -d is only used in development environments, such as loader, Babel, etc. -s is used in both production and development environments, such as Vue and jquery.

The configuration process

Initialize the

(1) Create a new empty project and initialize NPM init to generate a package.json file

Configuration webpack

NPM i-d webpack webpack-cli NPM 5.x + The node_modules folder and package.lock.json files are produced.

webpack.config.js
src/index.js

Let’s configure it manually. Open the webpack.config.js file and write:

index.html
index.js

package.json
script

webpack.config.js

Configuration webpack – dev – server

(1) For the convenience of viewing the compilation effect during development, install Webpack-dev-server, which can provide many services in the development environment, such as starting a server, hot update, interface proxy. NPM I -d webpack-dev-server and change script in package.json to:

--open



Pay attention to



index.html
src="dist/main.bundle.js"
scr="./main.bundle.js"



The solutions are as follows: (1) Passsrc="http://localhost:8000/main.bundle.js"The introduction of

(2) inwebpack.config.jstheoutputAdd a line to

Then throughsrc="assets/main.bundle.js"Introduction of the form of






npm i -D nodemon


"dev": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --mode development\""."build": "webpack --config webpack.config.js --mode production"
Copy the code

Clear dist

Since the code needs to be modified for construction for many times, the dist generated for many times will be too much, so delete the previous DIST before each construction and install the clean-webpack-plugin: NPM i-d clean-webpack-plugin plugin (webpack.config.js)

Automatic HTML generation

Manually created HTML files require us to manually add JS files and other resource paths, which is very inconvenient, so use htML-webpack-plugin to automatically generate HTML files. (1) Install NPM i-d html-webpack-plugin (2) configure webpack.config.js