Webpack Journey into the pit (ii) loader introduction

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, there will be occasional corrections and updates to the Article. 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

Introduction

In the previous blog we have succeeded in making the simple things complicated, we have only a few lines of code two files first.js , entry.js using Webpack for file packaging generation bundle.js .

WebpackThe only way to do this is to work with JavaScript Modules.

of course, if it can do just that, then it will not be so fire =_=. So it can loader handle other types of files by introducing Others.

Loader Introduction

LoaderA converter that can be understood as a module and a resource, which is itself a function that accepts the source file as a parameter and returns the result of the Transformation. This allows us to load any type of module or file, such as,, or picture, through require VUE JSX SASS .

Let's take a look at the characteristics of Loader.

• LoaderIt can be chained by pipeline, each of which loader can convert the resource into any format and pass loader it to the next, but the last one loader must return Javascript.
• Loadercan be executed synchronously or asynchronously.
• LoaderRuns in the Node. JS environment, so you can do anything That's possible.
• LoaderParameters can be accepted to pass the configuration item to loader .
• LoaderYou can bind to different types of files by file name extensions (or regular expressions).
• LoaderCan be published and installed via NPM.
• In addition to package.json the main designations passed, the usual modules can also be exported one loader to Use.
• Loadercan access the Configuration.
• Plug-ins let you loader have more Features.
• LoaderAdditional arbitrary files can be Emitted.

Loader using the installation

According to the above loader knowledge, it is certainly not possible to compile, so we installed to read the CSS file css-loader , and then style-loader insert it into the Page.

On the command line, enter:

1	NPM Install Css-loader Style-loader--save-dev

In package.json , the main is that devDependencies this field has changed:

12345

"devdependencies": {"css-loader": "^0.23.1", "style-loader": "^0.13.0", "webpack": "^1.12.2"}

Of course you can use a more convenient way to install, you can directly in package.json , add the corresponding dependencies (such as the above code), then run on the command line npm intall , it will automatically help us install the corresponding Dependency.

Installation is Complete.

Loading CSS files

Or a file in the previous blog to add a CSS File. style.css, Add the inside

123	Body {background:red;}

Modify our entry.js , original file unchanged, add require("!style!css!./style.css"); , used to introduce our CSS File.

We continue to compile:

1	Webpack Entry.js Bundle.js

When finished, refresh our page, is the background color turned red?

Extension auto-binding Loader

That's how we loader use it. If every time require the CSS file to write the loader prefix !style!css! such things, is obviously a very troublesome thing. We need it to be automatically bound to the required module type (extension) loader .

To see a more convenient way to change the entry.js in to require("!style!css!./style.css") require("./style.css") , can be changed a background color to make you more obvious to see the changes! Then execute:

1	Webpack entry.js bundle.js--module-bind "css=style!css"

。。

。。。

Not successful, right?
Because ! it has a special meaning on the command line, we need to escape it. Try Again:

1	Webpack./entry.js bundle.js--module-bind "css=style\!css"

If you succeed, you should be able to see the background change again.

Although it is possible to compile multiple CSS files to package, but always feel very cumbersome, I do not want to run a long list of commands every time what to do? Go on Down.

Webpack Journey into the pit (ii) loader introduction