万博manbetx平台-loader

Exports 万博manbetx平台 as string. 万博manbetx平台 is minimized when the compiler demands.

安装

npm i -D 万博manbetx平台-loader

用法

默认情况下，每个本地的 <img src="image.png"> 都需要通过 require （require('./image.png')）来进行加载。你可能需要在配置中为图片指定 loader（推荐 file-loader 或 url-loader ）

你可以通过查询参数 attrs，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 <tag>:<attribute> 组合的列表。（默认值：attrs=img:src）

If you use <custom-elements>, and lots of them make use of a custom-src attribute, you don't have to specify each combination <tag>:<attribute>: just specify an empty tag like attrs=:custom-src and it will match every element.

{
  test: /\.(万博manbetx平台)$/,
  use: {
    loader: '万博manbetx平台-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

要完全禁用对标签属性的处理（例如，如果你在客户端处理图片加载），你可以传入 attrs=false。

示例

使用此配置：

{
  module: {
    rules: [
      {
       test: /\.jpg$/, use: [ "file-loader" ] 
       },
      { 
      test: /\.png$/, use: [ "url-loader?mimetype=image/png" ] 
      }
    ]
  },
  output: {
    publicPath: "https://cdn.example.com/[hash]/"
  }
}

<!-- file.万博manbetx平台 -->
<img src="image.png" data-src="image2x.png" >

require("万博manbetx平台-loader!./file.万博manbetx平台");
// => '<img src=" 
//         data-src="image2x.png">'

require("万博manbetx平台-loader?attrs=img:data-src!./file.万博manbetx平台");
// => '<img src="image.png" data-src="data:image/png;base64,..." >'

require("万博manbetx平台-loader?attrs=img:src img:data-src!./file.万博manbetx平台");
require("万博manbetx平台-loader?attrs[]=img:src&attrs[]=img:data-src!./file.万博manbetx平台");
// => '<img  src="https://cdn.example.com/49eba9f/a992ca.png"
//           data-src="data:image/png;base64,..." >'

require("万博manbetx平台-loader?-attrs!./file.万博manbetx平台");
// => '<img  src="image.jpg"  data-src="image2x.png" >'

通过运行 webpack --optimize-minimize 来最小化

'<img src= 
      data-src=data:image/png;base64,...>'

或者在 webpack.conf.js 的 rule 选项中指定 minimize 属性

module: {
  rules: [{
    test: /\.万博manbetx平台$/,
    use: [ {
      loader: '万博manbetx平台-loader',
      options: {
        minimize: true
      }
    }],
  }]
}

The enabled rules for minimizing by default are the following ones:

• removeComments
• removeCommentsFromCDATA
• removeCDATASectionsFromCDATA
• collapseWhitespace
• conservativeCollapse
• removeAttributeQuotes
• useShortDoctype
• keepClosingSlash
• minifyJS
• minifyCSS
• removeScriptTypeAttributes

• removeStyleTypeAttributes

  The rules can be disabled using the following options in your webpack.conf.js

module: {
  rules: [{
    test: /\.万博manbetx平台$/,
    use: [ {
      loader: '万博manbetx平台-loader',
      options: {
        minimize: true,
        removeComments: false,
        collapseWhitespace: false
      }
    }],
  }]
}

#

对于以 / 开头的 url，默认行为是不转换它们。 如果设置了 root 查询参数，它将被添加到 URL 之前，然后进行转换。

和上面配置相同：

<img src="/image.jpg">

require("万博manbetx平台-loader!./file.万博manbetx平台");
// => '<img  src="/image.jpg">'

require("万博manbetx平台-loader?root=.!./file.万博manbetx平台");
// => '<img  src="https://cdn.example.com/49eba9f/a992ca.jpg">'

插值

你可以使用 interpolate 标记，为 ES6 模板字符串启用插值语法，就像这样：

require("万博manbetx平台-loader?interpolate!./file.万博manbetx平台");

<img src="${require(`./images/gallery.png`)}">
<div>${require('./components/gallery.万博manbetx平台')}</div>

如果你只想在模板中使用 require，任何其它的 ${} 不被转换，你可以设置 interpolate 标记为 require，就像这样：

require("万博manbetx平台-loader?interpolate=require!./file.ftl");

<#list list as list>
  <a href="${list.href!}" />${list.name}</a>
</#list>
<img src="${require(`./images/gallery.png`)}">
<div>${require('./components/gallery.万博manbetx平台')}</div>

导出格式

这里有几种不同的可用导出格式：

• module.exports（默认配置，cjs 格式）。"Hello world" 转为 module.exports = "Hello world";
• exports.default (当设置了 exportAsDefault 参数，es6to5 格式）。"Hello world" 转为 exports.default = "Hello world";
• export default (当设置了 exportAsEs6Default 参数，es6 格式)。"Hello world" 转为 export default "Hello world";

高级选项

如果你需要传递，特别是那些不能被字符串化，你还可以在 webpack.config.js 中定义一个 万博manbetx平台Loader 属性：

var path = require('path')module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.万博manbetx平台$/,
        use: [ "万博manbetx平台-loader" ]
      }
    ]
  },
  万博manbetx平台Loader: {
    ignoreCustomFragments: [/\{\{.*?}}/],
    root: path.resolve(__dirname, 'assets'),
    attrs: ['img:src', 'link:href']
  }
};

如果你需要定义两个不同的 loader 配置，你也可以通过 万博manbetx平台-loader?config=other万博manbetx平台LoaderConfig 改变配置的属性名：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.万博manbetx平台$/,
        use: [ "万博manbetx平台-loader?config=other万博manbetx平台LoaderConfig" ]
      }
    ]
  },
  other万博manbetx平台LoaderConfig: {
    ...
  }
};

导出到 万博manbetx平台 文件

一个很常见的场景，将 万博manbetx平台 导出到 .万博manbetx平台 文件中，直接访问它们，而不是使用 javascript 注入。这可以通过3个 loader 的组合来实现：

• 万博manbetx平台-loader

万博manbetx平台-loader 将解析 URL，并请求图片和你所期望的一切资源。extract-loader 会将 javascript 解析为合适的 万博manbetx平台 文件，确保引用的图片指向正确的路径，file-loader 将结果写入 .万博manbetx平台 文件。示例：

{
  test: /\.万博manbetx平台$/,
  use: [ 'file-loader?name=[path][name].[ext]!extract-loader!万博manbetx平台-loader' ]
}