This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Webpack configuration description

What is a Webpack

This Webpack is really not one or two words to explain. At its core, Webpack is a static module bundler for modern JavaScript applications. Essentially, WebPack is a modern static module packaging tool for JavaScript applications. But what is it? It’s not clear to explain concepts with concepts. Let’s explain the above statement from two points: modules and packaging

Webpack advantages **

Its advantages can be mainly classified as follows:

Webpack scripts are written in commonJS form, but AMD/CMD support is also comprehensive to facilitate code migration for older projects. Support for a number of module loaders to enable flexible customization, such as the Babel-Loader loader, which allows us to write code using ES6 syntax; Less-loader is a loader that can compile less into CSS files. Easy to develop, can replace some grunt/gulp work, such as packaging, compression obfuscations, image to base64, etc. The configuration can be packaged into multiple files, effectively taking advantage of the browser’s caching capabilities to improve performance.

The installation procedure is as follows: 1. Generate a package.json file.

Install Node and NPM first, since WebPack is a Node-based project. Then we need to generate a package.json file in the root directory of the project file, and run the following command in the root directory of the project file: NPM init

2. Install WebPack globally

Run the following command: NPM install -g webpack The following command is displayed:Copy the code

3. Import and export

// Import the module const path = require('path') // Export a configuration object. By default, webPack will look for webpack.config.js and read the exported configuration object from this file. Module. exports = {entry: path.join(__dirname,' SRC /main.js'), // output: {// configure the output option path: Path.join (__dirname,"dist"), // specify the output path after the package filename: 'bundle.js' // output filename} mode: 'development' //Copy the code