Webpack Getting Started

What is Webpack

Webpack can be seen as a modular baler: The thing it does is to analyze your project structure, find JavaScript modules and other extension languages (Scss,typescript, etc.) that the browser cannot run directly, and convert and package them into the appropriate format for use by the browser.

What are the characteristics of webpack compared to grunt and gulp?

Gulp/grunt is a tool that optimizes the front-end development process

Gulp/gurnt works by specifying steps in a configuration file, such as compiling, combining, and compressing certain files, which can be done automatically for you after the tool.

Webpack is a modular solution

How Webpack works: Treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package them as one (or more) browser-aware JavaScript files.

Webpack is faster and more straightforward, and can pack more files of different types.

Installation:

Webpack can be installed with NPM;

First go to your project file:
Win + R input cmd enter command

NPM Install Webpack--save--only//Current folder installation Webpack

Preparation for the formal use of Webpack

NPM init in order to create a Package.json file, this is a standard NPM documentation, which contains a wealth of information, including the current project's dependent modules, custom script tasks and so on. Use commands in terminal npm init to create this Package.json file automatically
What the Package.json file can do:

Detailed Description: http://blog.csdn.net/zmrdlb/article/details/53190696

Show the NPM packages your project relies on
Allows you to specify a package version [range]
Making you stable means you can better share it with other developers

Package.json file is ready, we install Webpack as a dependency package in this project

// 安装Webpacknpm install --save-dev webpack

Go back to the empty folder, and create two folders, app folder and public folder inside, app folder to store the original data and the JavaScript module we will write , the public folder to store the files for the browser to read (including the JS file generated with Webpack packaging and a index.html file). Next we create three more files:

• index.html--Put it in the public folder;
• Greeter.js--Put it in the app folder;
• main.js--Put it in the app folder;

We write the most basic HTML code in the index.html file, it is here to introduce the packaged JS file

(Here we first name the after-packaged JS file bundle.js , and then we will tell in detail).

In the We Greeter.js define a function that returns the element containing the greeting message html and exports the function as a module according to the COMMONJS specification:

main.jsIn the file we write the following code to Greeter模块 insert the returned node into the page.

Official use of Webpack

Webpack can be used in the terminal, in the basic use of the following methods:

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，# {destination for bundled file}处填写打包文件的存放路径# 填写路径的时候不用添加{}webpack {entry file} {destination for bundled file}

Can be seen webpack at the same time compiled main.js and Greeter,js , now open index.html , you can see the following results

Webpacka file was packaged for successful use

Original Blog Address: http://www.jianshu.com/p/42e11515c10f

I added something.

Webpack Getting Started