Webpack Journey into the Pit (iv) sail

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:

1 2 3 4 5 6 7 8 9 10 11 12

Rules: [ { /\. (png|jpe?g|gif|svg) (\?. *)?$/, ' Url-loader ', Options: { 8192, Name:path.posix.join ("',' img/[name].[ Hash:7]. [ext] ') } Added to this and will follow the file size, or be converted to Base64, or individually as a file The size limit can be the Name property/[name]. [ext], our files will be generated under the Set folder. }, ]

Add in HTML:

1 2 3

<src=alt="" > <id="Qwe" ></div> <id="ASD" ></div>

Add in our CSS:

1 2 3 4 5 6 7

/* Remember to write wide-height. */ #qwe { URL (img/logo.png); /*3.2k*/ } #asd { 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:

/tbody>

1 2 3 Span class= ' line ' >4 5 6 7

webpack #最基本的启动webpack命令 webpack-w #提供watch方法, package updates in real time webpack-p #对打包后的文件进行压缩 webpack-d #提供SourceMaps, easy to debug webpack--colors #输出结果带彩色, For example: The long-time steps are shown in red webpack--profile #输出性能数据, you can see the time of each step webpack--display-modules #默认情况下 node_modules the 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.

1 2 3 4 5

# installation NPM Install webpack-dev-server-d # Run NPX webpack-dev-server--config./webpack.config.js

Try Vue.

Let's try using Vue to work with Webpack to make automatic refreshes. (For Vuejs knowledge, you can start by self-officer net view)

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

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

1 2 3 4 5 6 7 8 9 10

Import Vue form ("vue")//If you have Babel-loader installed, you can use the ES6 syntax directly Const VUE =require (' Vue/dist/vue '); New Vue ({ ' #main ', Data: { ' 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! http://localhost:8080. 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)

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

Webpack Journey into the Pit (iv) sail