Home > Developer > Web Develop
The last time I wrote a blog about Webpack's introduction, I was just saying that using node to complete development, and Webpack packaging for the browser to recognize. In fact, its main idea is to realize the development of front-end modularization.
As is known to all, historically, JavaScript has been without a module system, unable to split a large program into interdependent small files, and then assemble them in a simple way. This makes it difficult to develop large, complex projects. This requires a module loading mechanism, before ES6, there are some module loading scenarios, such as COMMONJS and AMD, the previous article is to use the COMMONJS specification. But now, ES6 has filled the module with this blank. The following is simply the use of webpack to achieve the front-end modular development.
This article mainly introduces the introduction of Webpack, because I have just started Webpack, still in the study stage, so will speak very basic. For use of webpack children's shoes, reading can understand is my purpose. You can also refer to my previous blog Webpack Getting started. In addition to the ES6 modularity, I think you should be able to understand in advance, I will not talk about, there is a better document ES6 Module
Preparation before using the WebpackCreate a new folder, such as called webpack-demo , this is your project directory, and then in this folder to create a new src folder, the name can be arbitrary, in the SRC folder, create a few files:
Each file is actually a module,
In A.js:
default function () { console.log (' Module A ');}In B.js:
default function () { console.log (' Module B ');}In Index.js:
Import a from './a.js'./b.js 'A (); B ();
In index.html:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Modular development of Webpack</title></Head><Body> <Scriptsrc= "./index.js"></Script></Body></HTML>
Obviously, this is a modular development process, HTML files introduced Index.js, and Index.js relies on a.js and b.js. The result we want is that when the HTML file is opened in the browser, the console prints out:
Module Amodule B
In fact, however, when we open the console, it shows:
This is because the current front-end development, the browser does not support modularity, want to achieve modular function, need to rely on webpack.
Installing WebpackBefore you do, you need to install node and have some knowledge of NPM, and when node installs it comes with NPM.
The terminal enters the Webpack-demo folder and executes:
After entering this command, the terminal will ask you a series of information, such as project name, project description, author and so on, all the way to the default.
You can also perform:
NPM init-y
To avoid being asked some questions.
After this command executes, a Package.json file is automatically generated, which is a standard NPM documentation that contains a wealth of information, including the current project's dependency module, custom script tasks, and so on.
Next, install Webpack dependencies in this project, also in the Webpack-demo folder, execute:
Install Webpack--save-dev
May wait a moment, after execution will generate a Node_modules folder, there may be a Package-lock.json file, you do not care what they do first.
After installing Webpack, you also need to create a new Webpack profile, which is the default file name webpack.config.js .
After completing all the steps above, the contents of the folder are as follows:
Configuring the Webpack.config.js FileNext, let's configure webpack.config.js This file:
var path = require (' path '= { entry:'./src/index.js ', output:{ path: Path.join (__dirname,' Dist '), filename:' main.js ' }}Entry is the import file address, in this project, you need to refer to the Index.js file, so it is the entry file;
Output defines the exit, path is the packaged file storage path, it must be an absolute path, you can use the path module in node to splice an absolute path. Dist is a folder that is used to store packaged files and is not created automatically. FileName defines the packaged file name, which is stored in the Dist.
PackagedAfter configuring the file, execute the command at the terminal:
Webpack
This is the package success, we go to the project directory to see, we will find a dist directory, there are main.js files:
At this point we can use this main.js file, introduce it into the index.html, replace the index.js:
<script src= ". /dist/main.js "></script>
Save, open in Browser, console:
Found that we have achieved the desired effect at this time.
AddThe default profile name is webpack.config.js , if you modify the name, such as change to config.js , at this time packaging, you need to write:
Webpack--config Config.js
Specify the file name for the same effect.
EndThis is Webpack's simple packaging function, which seems to be not very simple. In fact, it is not as simple as described in this article, a lot of powerful features need to be implemented through configuration files. Before that, you should be able to get started with the knowledge above. More knowledge, I will slowly record, you can also refer to the document Webpack Chinese documents
The modular development of the first experience of Webpack
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
