Webpack Journey into the Pit (iv) sail

This is a series of articles, all the exercises in this collection exist in my GitHub warehouse Vue-webpack, after I have a new understanding and understanding of the article will be the occasional correction and update. The following is a list of the currently completed:

• Webpack Journey into the Pit (i) is not the beginning of the start
• Webpack Journey into the Pit (ii) loader introduction
• Webpack Journey into the Pit (iii) Webpack.config INTRODUCTION
• Webpack Journey into the Pit (iv) sail
• Webpack Journey into the Pit (v) load the Vue Single file component
• Webpack into the Pit Tour (vi) with Vue-router to achieve spa

Loading pictures

Now let's try loading the picture, first thing that must be installed corresponds loader . It will convert the image referenced in the style to a module to handle, and the loader needs to be installed first:

1	NPM Install Url-loader--save-dev

Of course you can also package.json add dependencies and then npm nstall the same effect.

Now go to our project directory to add the IMG folder, add two pictures, a large image jpg, a small png picture.

Then webpack.config.js add this paragraph to our list:

12345

Loaders: [{test: /\.css$/, loader: ' style!css '},{test: /\. ( png|jpg) $/, loader: "url-loader?limit=8192"} //Add to this! And will be in the file size, or converted to Base64, or alone as a file //After the size limit can be added &name=./[name].[ EXT], our files will be generated under the Set folder. ]

Add in HTML:

123	<img src="img/logo.png" alt= "" > <div id="Qwe" ></div> <div id="ASD" ></div>

Add in our CSS:

1234567

/ * Remember to write wide-height. */#qwe {background-image: url (img/logo.png); /*3.2k*/}#asd {background-image: url (img/5.jpg);}

Continue to run webpack if correct, open our browser and you will see our correct picture display.

If it is not correct, run npm install file-loader -D it and try again.

Now we open the Browser debugging tool, you can see the background picture less than 8K has been converted to Base64 encoding, and the picture is larger than 8k does not convert ( note the change of its address!) ).
The diagrams imported directly using IMG are not base64 converted.

Unloading

When the project becomes larger, webpack the compilation time is longer, and the output of the compilation can be made with the progress and color through the parameters.

1	Webpack--progress--colors

Here are some other common commands:

1234567

Webpack #最基本的启动webpack命令webpack-w #提供watch方法, packaged and updated in real time webpack-p #对打包后的文件进行压缩webpack -D #提供SourceMaps for easy debugging of Webpack--colors #输出结果带彩色, such as: The Long step webpack--profile is shown in red #输出性能数据 , you can see that each step is time consuming webpack--display-modules #默认情况下 node_modules module will be hidden, plus this parameter can show these hidden modules

We've got a part of Webpack's content, so in a production environment, I don't want to change every time, go to the command line to run our webpack commands, how should we implement the change after the automatic update?

Webpack gives us one webpack --watch , and he will start the listening mode. When listening mode is turned on, the unchanged modules are cached in memory after compilation, and are not recompiled every time, so the overall speed of the listening mode is very fast.

Run this command and try it!!

After we change the code, the command line can be seen directly on the automatic compilation, but obviously not smart enough, we also need to manually refresh the browser, (in fact, with liveload hack to automatically refresh!) ）。

I can't stand it anyway, and I want to refresh my browser manually. So webpack-dev-server the use will be a better way!

It will localhost:8080 start an express static resource Web server, and will automatically run in listening mode webpack , open in the browser http://localhost:8080/ or http://localhost:8080/webpack-dev-server/ can browse the page in the project and compiled resource output, and through a socket.io The service monitors their changes in real time and automatically refreshes the page.

12345

# Installing npm install webpack-dev-server-g # run webpack-dev-server

Let's try using Vue to work with Webpack to make automatic refreshes. (about Vuejs's knowledge, you can be the first officer to view the network, I may be next step in the case of the Vue to knock all over again, and then put on GitHub to let reviews)

Run first to npm install vue -save add Vue to our project dependencies.

First, add it in our entry.js Portal file:

12345678

//Import vue form ("vue")//If you have Babel-loader installed, you can use the ES6 syntax directly var vue =require ("Vue"); New Vue ({ el: "Body", data: {message: "Hello Vue.js" }});

Also index.html added in to respond to the data binding of Vue.

Run webpack-dev-server . Go to the browser to see the test results! Any change message in the value, you can see the browser will automatically refresh. And show the changed values in front of you. (It is possible to http://localhost:8080/webpack-dev-server/ refresh automatically only)

This is not exactly right, not comprehensive enough, and may only respond to changes in CSS. The configuration will continue to be adjusted in the next article

The automatic refresh is well-equipped. Let's try how to load the Vue file to implement the single-file component!

Webpack into the Pit (iv) set sail