什么是loader

loaders是你用在app源碼上的轉換元件。他們是用node.js運行的，把源文件作為參數，返回新的資源的函數。?
例如，你可以用loaders告訴webpack加載 coffeeScript或者JSX。?
loaders 特點：?
1. 可以鏈式拼接。他們用在通向文件的管道，最后一個loader預期返回一個javascript，其它Loader可以返回任意格式給下一個loader。?
2. loaders可以是同步的，也可以是異步的。?
3. loaders是用node.js來跑，可以做一切可能的事情。?
4. loaders接收query參數。這些參數會傳入 loaders內部作為配置來用。?
5. 在webpack config 中 loaders可以綁定到 擴展名/正則 。?
6. loaders 可以用npm 發布或者安裝。?
7. 除了用package.json 的main導出的 loader外， 一般的模塊也可以導出一個loader。?
8. 裝載機可以訪問配置。?
9. plugin 可以給loaders更多功能。?
10. loader可以發出更多的任意文件。

resoloving loaders

loader 的resolve跟 模塊很像。一個loader預期導出一個函數，而且是用兼容javascript的nodepgn 的。一般情況下，用npm管理loader,但是你也可以在自己app內有loader文件。

引用loader

為了方便，雖然不是必須的， loaders一般命名為xxx-loader， xxx就是loader的實義名。例如 json-loader。?
或許你已經用全名引用了loader(例如 json-loader)，如果沒有你可以用它的短名（例如 json）。?
裝載機命名慣例和優先級搜索順序由webpack 配置API中的resolveLoader.moduleTemplates 定義。?
裝載機的命名約定可能在用require?語法引用時會有用。看下面的用法。

安裝 loader

如果 npm 上有 這個Loader，你可以像這下面這樣安裝

$ nppm install xxx-loader --save

• 1

或者

$ npm install xxx-loader --save-dev

• 1

用法

有很多種辦法在你的app中用loader：?
1. 顯示地在?require?中添加。?
2. 在配置文件中 配置。?
3. 在命令行配置。

在require?中用

注意：如果你不知道你的代碼在哪個環境（node.js和browser）中用盡量， 避免使用這個。 使用下一節那樣的配置。

在require語句中（或者 define, require.ensure等）你可以指定裝載機。只需要用 “！”將資源和Loader分開。每一部分會相對于當前文件夾來resolve。它可能覆蓋config 文件中用 “！”規定的全部loader。

require("./loader!./dir/file.txt"); // => uses the file "loader.js" in the current directory to transform // "file.txt" in the folder "dir". require("jade!./template.jade"); // => uses the "jade-loader" (that is installed from npm to "node_modules") // to transform the file "template.jade" // If configuration has some transforms bound to the file, they will still be applied. require("!style!css!less!bootstrap/less/bootstrap.less"); // => the 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 will not be applied.

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

config配置

你可以在config文件中把loader綁定到 一個正則。

{module: {loaders: [{ test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } }

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

命令行

命令行中，你也可以把Loader綁定到擴展名上。

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

• 1

上面的意思是用jade文件 用“jade-loader”加載，css文件用 “style-loader”和“css-loader”加載。

參數

loader可以傳入query字符作為參數（像瀏覽器中那樣），query字符串跟在 Loader后面。例如?url-loader?mimetype=image/png。?
注意：查詢字符串的格式是由加載程序決定。請去具體的loader文檔中查看。許多加載機可以接收正常的query字符串（例如 ?key=value&key2=value2）?
，也可以接收JSON對象(?{“key”:”value”,”key1”:”value1”})。

看以下四種寫法。

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

---

使用插件

在webpack中通常使用插件添加與 bundles相關的功能。例如 BellOnBundlerErrorPlugin 會在打包進程中給你通知錯誤消息。

內置插件

直接用配置項的plugins屬性。

// 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"]) ], ["normal", "loader"]) ] };

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

其它插件

如果不是內置插件，在npm 上發布過的插件一般可以通過npm 安裝安裝，如果沒有發布，你要用其它方法了

npm install component-webpack-plugin

• 1

然后像像下面這樣使用

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

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

如果你用npm裝第三方插件，建議用 webpack-load-plugins .它能檢測所有第你安裝過并且在保存在package中的三方插件，在你需要用的時候會加載進來。

更多相關文章

webpack入門（一）

webpack入門（二）

webpack入門（三）

webpack入門（四）

webpack入門（五）

webpack入門（六）

去8斗5車，查看更多技術文章。

轉載于:https://www.cnblogs.com/ExMan/p/7056007.html

總結

以上是生活随笔為你收集整理的webpack入门（四）——webpack loader 和plugin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。