How to install and configure webpack in a project

This article mainly introduces the relevant knowledge of "how to install and configure webpack in the project". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to install and configure webpack in the project" can help you solve the problem.

Basic use of webpack

1. New blank file (directory) File name cannot be webpack, run npm init -y (path cannot have Chinese), initialize package.json file

2. Create src source directory

3. Create index.html under src

4. Initialize the basic structure of the home page

5. Download dependencies required for the page

Install and configure webpack in your project

1. Run npm install webpack webpack-cli-D to install webpack related tools

2. Create webpack.config.js file in project root directory, configuration file

3. Add to webpack file

module.exports={

mode: 'development' // mode Used to specify the build mode

}

4. In package.json

"scripts":{//Add

"dev":"webpack"

}

5. Run npm run dev in the terminal to start webpack for project packaging

III. Entry and exit of packaging

1. webpack default

Entry file: src: index.js

Export file: dist: main.js

2. Add to module.exports when you need to modify the default file

entry: path. join (__dirname,''),//package entry path

output: {

path: path. join (__dirname,''),//exit path

filename: 'bundle.js'//export file name

}

IV. Webpack automatic packaging function

1. Run the npm i webpack-dev-server -D command to install the automatic packaging tool

2. Modify dev of package.json:"webpack-dev-server"

3. Modify the path of the html page reference script src=""

4. Run npm run dev to repackage

5. Access in browser

Preview the page in the browser

Configure parameters related to automatic packaging (after packaging, it will be automatically opened as follows)

--open Default browser

--host 127.0.0.1

--port port

Any modification to the configuration file requires repackaging once

About "how to install and configure webpack in the project" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.