Notes on vegetables

Today, I finished my work at work and took some time to learn Webpack, so I learned the most basic installation and configuration, so my notes are very basic. Don’t ask me why I learn now, Emmmm, just came out of the dishes, there are many, many, even the tip of the iceberg has not learned, crying

The installation of the webpack

First create a new project to initialize NPM, install Webpack locally, and install webPack – CLI as follows:

// Create a new directory mkdir webpack_demo // Switch to the new directory path CD webpack_demo // Initialize NPM NPM init -y // Install webpack and webpack-cli NPM install webpack webpack-cli --save-devCopy the code

Configuration file for WebPack

// Open the configuration file webpack.config.js


// Introduce the node core module path
// Call its.resolve() method
const path = require('path')

moudule.exports = {
    // Webpack default mode is Production, packaged code is compressed
    // In development mode, packaged code is not compressed
    mode: 'development'.// The entry file from which the project is packaged
    entry: './index.js'.// Which folder to place the package in
    output: {
        // The name of the packaged file
        filename: 'bundle.js'.// Where to put the packaged file (absolute path)
        path:path.resolve(_dirname, 'bundle')}}Copy the code

Execute the pack command: NPX webpack

In simple terms, when we run the NPX webpack command, the application will automatically find the default configuration file ==webpack.config.js== and perform the packing task according to the configuration in it.

What if we rename the default configuration file to something else, such as webpack.con.js, and the program cannot find the default configuration file?

Quite simply, use the NPX webpack –config XXX command line to perform project packaging

npx webpack --config webpack.con.js 

// config is followed by a custom file name
Copy the code