Webpack installation and configuration beginner stepping Pit

Webpack is a front-end tool developed based on Nodejs

Webpack can handle JS file dependencies, Webpack can handle JS compatibility problem, the advanced browser does not recognize the syntax of the browser to the normal recognition of the syntax

(JNLP is task-based, Webpack is built on a project)

The various files and directories required for a new project, the underlying code

1. Installing Webpack

1) Global Installation

C:\USERS\LMX>NPM Install Webpack-g

C:\USERS\LMX>NPM Install Webpack-cli-g

C:\USERS\LMX>NPM Insall webpack-dev-server-g

2) Project Installation

command line current file path

NPM init-y

NPM Install webpack-d

NPM Install webpack-cli-d//due to Webpack4 no longer contains webpack-li so need to be installed separately, otherwise error

NPM Install webpack-dev-server-d//For automatic package generation Bundle.js

2. Project operation

1) operation mode one: ' Webpack ' command

Error Resolution one:

Tip whether to use development or production mode, you can use ' webpack--mode development ' or configure it in ' webpack.config.js ' file mentioned in ' Error resolution two '

Error resolution two:

Webpack the default need to package the file is Index.js, and we are using main.js so error, in the project directory to create a new name of ' webpack.config.js ' file, the basic content is as follows:

The default path is the root folder of the current project, which is the folder directory where Webpack is installed

Const PATH = require (' path '= {    ' development ',  // define run mode    entry: Path.join (__dirname, './src/main.js '),  // The file that needs to be packaged    output:{   //  Package generated file        path:path.join (__dirname, './dist '),        filename:' bundle.js '    },} 

Perform ' Webpack ' automatic generation

2) operation mode Two:

Command line execution: ' Webpack. \src\main.js. \dist\bundle.js '

Note the direction of the slash

3) operation mode Three:

Install ' webpack-dev-service ' local run, Webpack generated bundle.js is not stored on the physical disk, but directly managed into the memory, so the root directory may not find this file

There are two ways to configure ' Webpack-dev-service ':

① Configuration Method One:

Configure ' Webpack-dev-service ' in ' Package.json '

"Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "dev": " Webpack-dev-server--mode Development--open--port 8081--contentbase src "  },

--mode Development Configuration Run mode

--open whether to open the browser when running (open the browser with the system default open link)

--port 8081 Configuring a locally opened port number

--contentbase src Configure the default browser to open the page under what

② configuration Mode II: Configured in ' Webpack.config.js '

Const PATH = require (' path '= {    ' development ',    entry:path.join (__dirname,'./src/ Main.js '),// Package The file     output:{        path:path.join (__dirname,'./dist '),        FileName:' bundle.js '    },    devserver:{        Open:' true ',        Port: ' 8081 ',        contentbase: ' src '    },}

The command line executes ' npm run Dev ' after the ③ configuration is complete

--------------------------------------------------------------------------------------------------------------- -

This completes the basic operation of the Webpack

Webpack installation and configuration beginner stepping Pit