Webpack Introduction (iv)--webpack loader and plugin

What is Loader

Loaders is the conversion component you use on the app source. They are functions that run with node. JS and return the source file as parameters to the new resource.
For example, you can use loaders to tell Webpack to load Coffeescript or JSX.
Loaders Features:
1. Can be chained splicing. They used the pipeline to the file, and the last loader expected to return a JavaScript, and the other loader could return any format to the next loader.
2. The loaders can be synchronous or asynchronous.
3. Loaders is running with node. JS and can do all the possible things.
4. Loaders receives the query parameter. These parameters are passed into the loaders internally as a configuration to use.
5. Loaders can be bound to an extension/regular in Webpack config.
6. Loaders can be published or installed with NPM.
7. In addition to the loader exported with Package.json Main, the general module can also export a loader.
8. The loader can access the configuration.
9. Plugin can give loaders more functionality.
Loader can issue more arbitrary files.

Resoloving Loaders

Loader's resolve is like a module. A loader is expected to export a function, and it is using JavaScript-compatible NODEPGN. In general, use NPM to manage loader, but you can also have loader files within your app.

Reference Loader

For convenience, although not necessary, loaders is generally named Xxx-loader, XXX is loader's real name. such as Json-loader.
Perhaps you have already quoted loader (for example, Json-loader) with your full name, and if not you can use its short name (such as JSON).
The loader naming convention and the priority search order are defined by the resolveloader.moduletemplates in the Webpack configuration API.
The naming convention for loaders can be require useful when referencing with syntax. Look at the following usage.

Installing loader

If you have this loader on NPM, you can install it like this

$ nppm install xxx-loader --save

• 1

Or

$ npm install xxx-loader --save-dev

• 1

Usage

There are a number of ways to use loader in your app:
1. Add the display to the require .
2. Configure in the configuration file.
3. On the command line configuration.

In requireUsed

Note: If you do not know in which environment (node. js and browser) Your code is used, avoid using this. Use the configuration as in the next section.

In the Require statement (or define, require.ensure, etc.) you can specify the loader. Only need to use "! "Separate the resources from the loader. Each section is resolve relative to the current folder. It may overwrite the config file with "! "All the loader stipulated.

Require"./loader!. /dir/file.txt ");//= uses theFile"Loader.js"In the current directoryTo transform//"File.txt"In the folder"dir". Require ("Jade!. /template.jade ");//= uses the"Jade-loader" (ThatIs installed from NPMTo"Node_modules")//To transform theFile"Template.jade"//IfConfiguration has some transforms boundto theFile, they'll still be applied.require ("!style!css!less!bootstrap/less/bootstrap.less");//=File "bootstrap.less" in the folder  " Less "in the " bootstrap "//module (that is installed from GitHub to  Node_ Modules ") is//transformed by the " Less-loader ". The result is transformed by the// "Css-loader" and then by the " Style-loader ".//if configuration has some transforms bound to the file, they would not be applied.      

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Config configuration

You can bind the loader to a regular in the config file.

{Module: {Loaders: [{Test/\.jade$/,Loader"Jade"},//= "Jade" loader is used for test: /\.css$/, loader:  "Style!css"}, // = " style "and " CSS "loader is used for ". css "files //alternative syntax: {test: /\.css$/, loaders: [ "style", Span class= "hljs-string" > "CSS"]},]}}           

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

Command line

On the command line, you can also bind the loader to the extension.

$ webpack --module-bind jade --module-bind ‘css=style!css‘

• 1

The above meaning is loaded with "Jade-loader" with the Jade file, and the CSS file is loaded with "Style-loader" and "Css-loader".

Parameters

Loader can pass in the query character as a parameter (as in a browser), and the query string follows loader. For example url-loader?mimetype=image/png .
Note: The format of the query string is determined by the loader. Please go to the specific loader document to view. Many loaders can receive a normal query string (for example, key=value&key2=value2)
, you can also receive the JSON object (? {" Key ":" Value "," Key1 ":" Value1 "}).

Look at the following four ways of writing.

require("url-loader?mimetype=image/png!./file.png");

• 1

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

• 1

{    test: /\.png$/,    loader: "url-loader", query: { mimetype: "image/png" }}

• 1
• 2
• 3
• 4
• 5

webpack --module-bind "png=url-loader?mimetype=image/png"

• 1

Using plugins

Plug-ins are typically used in webpack to add bundles-related functionality. For example, Bellonbundlererrorplugin will notify you of error messages during the packaging process.

Built-in plugins

The plugins property of the configuration item directly.

//webpack should be in the Node_modules directory, install if not. var webpack = require ( "Webpack" ); module. exports = {plugins: [new Webpack. Resolverplugin ([new webpack. Resolverplugin.directorydescriptionfileplugin ( "Bower.json", [  "main"]) ], [ "loader"])]};      

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Other plugins

If it's not a built-in plugin, the plug-ins you've posted on NPM can be installed via NPM, and if they're not, you'll need to use a different method.

npm install component-webpack-plugin

• 1

And then use it like this

var ComponentPlugin = require("component-webpack-plugin");module.exports = { plugins: [ new ComponentPlugin() ]}

• 1
• 2
• 3
• 4
• 5
• 6

If you use NPM to install a third-party plugin, it is recommended to use Webpack-load-plugins. It detects all three-party plugins that you have installed and are stored in the package, which are loaded when you need them.

More articles Webpack Getting Started (i) Webpack (ii) Introduction to Webpack (iii) webpack Introduction (iv) Webpack Getting Started (Fri) Webpack Getting Started (vi)

Go to 8 bucket 5 cars and see more technical articles.

Webpack Introduction (iv)--webpack loader and plugin