Webpack Getting Started

Webpack is now the most popular modular management and packaging tool for front-end resources.

It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. You can also code-isolate modules that are loaded on demand. With loader conversion, any form of resources can be seen as modules, such as COMMONJS modules, AMD modules, ES6 modules, CSS modules, images, JSON, coffeescript, less and so on.

Simply put, Webpack is a module packager that statically analyzes the dependencies of the modules and then puts the modules in different folders according to the corresponding rules assets.

One, install Webpack

Assuming that you have already installed node, if not installed, please go to node. JS installation and environment configuration, install the webpack process;

Windows environment, mkdir webpack new folder webpack through cmd command;

CMD:CD Webpack//Enter the Webpack folder;

Perform:

1, NPM init initializes the JSON file and creates a new Package.json file;

2, NPM i webpack webpack-cli-g//will be installed to the global, because the new version of the Webpack will webpack-cli independent of the need to install two modules at the same time;

3,NPM i webpack webpack-cli--save//will be installed to Package.json under dependencies, npm I webpack webpack-cli--save-dev installed to local and write Packag E.json dependency in the development environment;

Second, the basic use

1. Create a new directory in the current directory src and create a new file Main.js

2, you can use Webpack main.js command to package a JS file

Webpack Getting Started