Getting started with webpack

What is webpack?

Webpack is a popular packaging tool, which generates a graph from dependent files and packages them into files. When webpack processes an application, it will recursively build a dependency graph, which contains each module required by the application, and then package all these modules into one or more bundle s. Webpack Chinese official website:

Webpack is a module packer. Its main goal is to package JavaScript files together. The packaged files are used in browsers, but it can also transform, bundle or package any resource or asset.https://webpack.docschina.org/

webpack core concepts

1. Entrance: enter
2. Outlet: output
3. loader: loader
4. Plug in: plugin
5. Mode: mode
6. Local server: dev Server

Advantages and disadvantages of wecpack

webpack writes scripts in the form of commonJS, but it also has comprehensive support for AMD/CMD to facilitate code migration of old projects.
The development is convenient and can replace some grunt/gulp work, such as packaging, compression confusion, image conversion to base64, etc.
The configuration can be packaged into multiple files to effectively use the browser's caching function to improve performance.

webpack installation

Initialize project

cd mypack
// Enter your project directory mypack directory, and you can create it yourself

npm init -y
//  Initializing the project folder creates a package js

install

npm i webpack webpack-cli -D

prepare documents

--dist file generation directory
----- index.html

-- index.js main entry file
-- header.js file to be imported by index

#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>first webpack page</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--Packed js The default name is main.js-->


#  index.js
import {header} from './header.js'
document.body.append(header);


#  header.js
var header =document.createElement("div");
header.innerHTML="Hello webpack from header";
export {header};

Execute the command to open index html

npx webpack index.js
//Execute in your project directory. The name here is mypack

Then open your dist / index HTML view web page file
At the same time, you will find that there will be an extra main in the dist directory js this packaged js file

Custom webpack config. JS configuration file

Create a new webpack in the project root directory config. JS webpack default configuration file

const path = require('path')
// The path module of node is introduced

module.exports={
    // Specify the entry of the file
    entry:'./index.js',
    //Export
    output:{
        filename:'main.js',
        // Define file name
        path:path.resolve(__dirname,'dist')
        // Define folder 
        // __ dirname get current directory
        // path. The resolve method resolves a sequence of paths or path fragments into absolute paths
    }
    // Specify the packaged exit
}
// module. The meaning of export module in export node

# The following is the pure version
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

Next, configure scripts

Find package. In the project root directory JS configure scripts

"scripts":{
    "build": "webpack",
    "serve":  "webpack serve"
}

Configure the local service to automatically open the browser and hot update

module.exports = {
    ..., // The previous content is omitted
    devServer:{
		open:true,//Open browser automatically
		hot:true,//Hot renewal
		host:"localhost",//Local domain name
		port:8080,//Port number
		proxy:{}//Same as Vue config. Agent configuration in JS
	}
}

Open the project using npm run build package and npm run serve

Keywords: Webpack

Added by solus on Tue, 28 Dec 2021 20:53:34 +0200

Programming VIP