Basic use of Webpack

What is Webpack

Concept: Webpack is a concrete solution for front-end project engineering

Main features: it provides front-end modular development support, as well as code compression and confusion, dealing with browser side JavaScript compatibility, performance optimization and other powerful functions

Benefits: Let the programmer focus on the implementation of specific functions, improve front-end development efficiency and project maintainability

Note: The vast majority of current enterprise front-end projects are packaged and built based on WebPack

Second, create a list of interlaced color items

  1. Create a blank directory for the project and run NPM init -y to initialize the package.json configuration file
  2. Create a new SRC source directory
  3. Create a new SRC ->index.html home page and SRC -> index.js script
  4. Initialize the home page basic structure
  5. Run NPM install jquery -s to install jquery
  6. Using ES6 modular import jQuery to achieve interlaced list effect

Install WebPack in your project

Run the following command from your terminal to install the two packages associated with WebPack

NPM install [email protected] [email protected] -d NPM install webpack webpack-cli -d // Latest versionCopy the code

Configure WebPack in your project

  1. In the project root directory, create a webPack configuration file named webpack.config.js and initialize the following basic configuration
Module. exports = {mode: 'development' // mode specifies the build mode. The options are development and production}Copy the code

Optional value of mode

1.development

The development environment

There is no code compression or performance optimization for the generated files from packaging

Fast packaging, suitable for use in the development phase

2.production

The production environment

The generated files are compressed and optimized for performance

Packaging is slow and is only suitable for use during the project release phase

2. Under the scripts node of package.json, add dev script:

"Scripts ": {"dev" : "webpack" // scripts can be executed by NPM run, such as NPM run dev}Copy the code

3. Run the NPM run dev command in the terminal to start webpack for project construction

​

​

Use of the webpack.config.js file

  • Webpack.confg.js is the webpack configuration file. Webpack reads this configuration file to package the project based on the given configuration before actually starting to package the build
  • Note: Since WebPack is a packaging tool developed based on Node.js, its configuration file supports webPack customization using Node.js-related syntax and modules

Default conventions in WebPack

In Webpack there are the following default conventions:
  1. The default package entry file is SRC -> index.js
  2. The default output file path is dist -> main.js

Note: You can change the default convention for packaging in webpack.config.js

Custom packaging entry and exit

In the webpack.config.js configuration file, specify the entry to the package through the Entry node. Specify the packaged exit through the output node.

Example code is as follows:

Const Path = require(' Path ') // exports a configuration object module.exports = {mode: 'development', // mode specifies the build mode. Options include development and production. Path.join(__dirname, './ SRC /index.js'), // Specify outpuut: { Path.join(__dirname, './dist'), // output filename filename: 'bundle.js'}}Copy the code

\