webpack入门——webpack loader 和plugin

Posted 2020-09-23 ExplorerMan

什么是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车，查看更多技术文章。