Recently, I chose VUE to learn the framework, and then came into contact with the single-file components in VUE. The official recommendation is to use Webpack + VUe-loader to build these single-file VUE components, so I started the journey of Webpack into the pit. Since you haven’t used any build and modularization tools before, this series will be very basic. And there may be a lot of incorrect places, I hope you understand, and point out the mistakes to help improve. Thank you very much!

This is a series of articles. All the exercises in this series are stored in vue-Webpack in my Github repository. After I have a new understanding and understanding, I will revise and update the articles from time to time. Here’s a list of what’s done so far:

What is a webpack

I don’t really want to write this, but it seems to be in every tutorial. Write something random. You can skip it.

Webpack is a module loader and packaging tool developed by German developer Tobias Koppers. In Webpack, it can use and process all kinds of resources, such as JS (including JSX), coffee, style (including less/ Sass), pictures and so on as modules. Therefore, JS in Webpack can reference CSS, and CSS can embed image dataUrl. Webpack has a module loader for different file types. For example, Vue uses vue-loader. Of course, this is a later story, we will talk about it later.

See the picture below:

The official website: github.com/webpack/web…

The installation

Prerequisite: Since WebPack is a Node-based project, make sure you have Node.js installed on your computer, as well as NPM. Here I am using: node: v5.8.0, NPM: 3.7.3, if the version is not correct, please update to the latest version. If the NPM installation is too slow, you can use the NRM project to switch the NPM source address.

NPM install webpack -g, which may take a while.

After the installation is successful, run webpack -h on the CLI to view the version information. And the instructions you can use.

Of course, we should all install Webapck into our current project dependencies so that we can use this version of the project so that we can use the local version of the project Webpack.

npm init 
npm install webpack --save-dev
npm i webpack -D
Copy the code

Once installed, our package.json directory should look like this:

{"name": "first-demo", "version": "1.0.0", "description": "this is my first-demo", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "guowenfh", "license": "MIT", "dependencies": {}, "devDependencies" : {" webpack ":" ^ 1.12.14 "}}Copy the code

Now that the environment is installed, let’s start our first packaged run with WebPack!

Create a static page called index. HTML and a JS entry file called entry.js. :

    
    
    

    
    Copy the code

Document.getelementbyid ('app').innerhtml =" This is my first successful package ";Copy the code

The files have been created successfully, so let’s start packing!

webpack entry.js bundle.js

Open index.html in your browser and you’ll see the text we set. : This is my first successful package

Wouldn’t it be nice to introduce such simple functionality directly into HTML? That’s true, but we’re just getting started. Don’t worry.

Let’s add another file called first.js with the following contents:

Var h2= document.createElement("h2") h2. InnerHTML =" " ; document.body.appendChild(h2);Copy the code

Change the entry. Js:

Document.getelementbyid ('app').innerhtml =" This is my first successful package "; require("./first.js");Copy the code

Do the same thing again. Pack again. Webpack entry.js bundle.js, if successful, the packaging process will display a log:

Hash: b1CFE7ff9D75CE235dc9 Version: webPack 1.12.14 Time: Emitted by DFM Asset Size Chunks Names bundle.js 1.82 kB 0 [emitted] main [0]./entry.js 208 bytes {0} [built] [1] ./first.js 145 bytes {0} [built]Copy the code

Webpack analyzes the entry files and parses the individual files that contain dependencies. These files (modules) are packaged into bundle.js. Webpack assigns each module a unique ID by which it indexes and accesses the module. When the page starts, the code in Entry.js is executed first, and other modules are executed when require is run.

Refresh the browser and you’ll see that the code we just created has taken effect and new text appears.

Okay, I know it’s too easy for you guys to watch, but we’re up a notch.

The following is a reference document, also equivalent to a summary bar, there are many I have not practiced, or can see more, good articles should be posted