Webpack Getting Started with notes

Last Update:2017-07-10 Source: Internet

Author: User

Tags css preprocessor

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Why use the Webpack

Many of today's web pages can actually be seen as feature-rich applications that have complex JavaScript code and a whole bunch of dependent packages. In order to simplify the complexity of development, the front-end community has emerged a lot of good practical methods

Modularity allows us to refine complex programs into small files;
Similar to Typescript's development language based on javascript: it allows us to implement features that are not directly used by the current version of JavaScript, and can then be loaded into JavaScript files to make the browser recognizable;
Scss,less and other CSS preprocessor 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 package them in the appropriate format for use by the browser.

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

In fact, Webpack and the other two do not have much comparability, gulp/grunt is a tool to optimize the front-end development process, and Webpack is a modular solution, but webpack the advantages of Webpack can replace gulp/ Tools for the Grunt class.

Grunt and gulp work in a configuration file that indicates specific steps for tasks such as compiling, combining, and compressing certain files, which can then be done automatically for you.

The way Webpack works is to 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 it as a browser-aware JavaScript file.

Installation

Webpack can use NPM installation, create a new empty Practice folder (named Webpack sample Progect here), after the terminal to the folder to execute the following instructions to complete the installation.

Preparation for the formal use of Webpack

Create a Package.json file in the Practice folder above, which is a standard NPM documentation that contains a wealth of information, including the current project's dependency module, custom script tasks, and more. Use commands in terminal npm init to create this Package.json file automatically
```
npm init
```

After entering this command, the terminal will ask you a series of information, such as project name, project description, author and so on, but don't worry, if you are not ready to publish your module in NPM, the answer to these questions is not important, enter the default.

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, app folder to store raw data and JavaScript module we will write, The public folder is used to store data that is ready for the browser to read (including the packaged JS file generated using Webpack and a index.html file). Here you also need to create three files, the index.html file is placed in the public folder, two JS files (greeter.js and Main.js) in the app folder, the project structure as shown

Project structure

index.html file has only the most basic HTML code, its only purpose is to load the packaged JS file (bundle.js)

<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset= "utf-8" > <title>webpack Sample Project</title> </ head> <body> <div id= Root ' > </div> < script src= "bundle.js" ></script> </body></HTML>

Greeter.js only includes a function that returns an HTML element that contains a greeting message.

// Greeter.jsmodule.exports = function() { var greet = document.createElement(‘div‘); greet.textContent = "Hi there and greetings!"; return greet;};

The main.js is used to insert the node returned by the Greeter module into the page.

//main.js var greeter = require(‘./Greeter.js‘);document.getElementById(‘root‘).appendChild(greeter());

Official use of Webpack

Webpack can be used in the terminal, its most basic command is

file/入口文件} {destination for bundled file/存放bundle.js的地方}

You only need to specify a portal file, Webpack will automatically identify other files that the project depends on, but be aware that if your webpack is not installed globally, you will need to specify an additional address in the node_modules when you use this command in the terminal, and continue with the example above , the following command is in the terminal

//webpack非全局安装的情况node_modules/.bin/webpack app/main.js public/bundle.js

Webpack Getting Started with notes

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More