Webpack Loaders

【Webpack Loaders】

　　

　　

1、Query parameters

　　Loader can be passed query parameters via a query string (just like in the web). The query string is appended to the loader with ?. i.e. url-loader?mimetype=image/png.

　　Note: The format of the query string is up to the loader. See format in the loader documentation. Most loaders accept parameters in the normal query format (?key=value&key2=value2) and as JSON object (?{"key":"value","key2":"value2"}).

　　1）in require

　　

　　2）in configuration

　　

　　

2、webpack analyzes all the node-style require() calls in your app and builds a bundle that you can serve up to the browser using a <script> tag.

　　

3、A loader is a node module exporting a function.

　　the loader is called with one parameter: the content of the resource file as string.

　　The loader is expected to give back one or two values. The first value is a resulting JavaScript code as string or buffer. The second optional value is a SourceMap as JavaScript object.　　

　　when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.

4、Loaders can be also be chained together by separating loaders with the !. This is helpful for applying multiple transformations to a file in a pipeline.

　　

　　When chaining loaders, they are applied right to left (from the file, back). In the above example,my-styles.less will be transformed first by the less-loaderconverting it to css, and then passed to the css-loader where urls, fonts, and other resources are processed, and then finally passed to style-loader to be transformed into a <style> tag.

5、webpack treats every file (.css, .html, .scss, .jpg, etc.) as a module. However, webpack only understands JavaScript.

　　Loaders in webpack transform these files into modules as they are added to your dependency graph.

　　

参考：

1、http://webpack.github.io/docs/using-loaders.html