polymer-webpack-loader

用于 webpack 的聚合物组分装载机。

该加载器允许您编写混合的 HTML，CSS 和 JavaScript Polymer 元素，并仍然使用完整的 webpack 生态系统，包括模块捆绑和代码拆分。

加载器转换您的组件：

<link rel="import" href="./my-other-element.html"> -> import './my-other-element.html';

<dom-module> 成为在运行时注册的字符串

<script src="./other-script.js"></script> -> import './other-script.js';

<script>/* contents */</script> -> /* contents */

那是什么意思？

任何不是外部链接且不以“ ，” 或一系列开头的<link>“href”或<script>“src”都将附加到值的开头。为了防止这种变化，使用下面的忽略链接选项。~/./.././

路径翻译

tag	import
<link rel="import" href="path/to/some-element.html">	import "./path/to/some-element.html"
<link rel="import" href="/path/to/some-element.html">	import "/path/to/some-element.html"
<link rel="import" href="../path/to/some-element.html">	import "../path/to/some-element.html"
<link rel="import" href="./path/to/some-element.html">	import "./path/to/some-element.html"
<link rel="import" href="~path/to/some-element.html">	import "~path/to/some-element.html"

配置加载程序

{
  test: /\.html$/,
  include: Condition(s) (optional),
  exclude: Condition(s) (optional),
  options: {
    ignoreLinks: Condition(s) (optional),
    ignorePathReWrite: Condition(s) (optional),
    processStyleLinks: Boolean (optional),
    htmlLoader: Object (optional)
  },
  loader: 'polymer-webpack-loader'
},

include: Condition(s)

请参阅 webpack 文档中的 Rule.include 和 Condition。与此选项匹配的路径将由 polymer-webpack-loader 处理。警告：如果此属性存在，加载器将只处理符合给定条件的文件。如果你的组件有一个<link>指向一个组件（例如在另一个目录中），那么这个include条件也必须匹配该目录。

exclude: Condition(s)

请参阅 webpack 文档中的 Rule.exclude 和 Condition。与这个选项匹配的路径将不被聚合物 webpack 加载器处理。注：通过导入的文件<link>不会被此属性排除。看Options.ignoreLinks。

选项

ignoreLinks: Condition(s)

<link>指向符合这些条件的路径（请参阅webpack文档中的条件）将不会转换为imports。

ignorePathReWrite: Condition(s)

<link>匹配这些条件的路径（请参阅webpack文档中的条件）在转换为imports 时不会更改。这可以用于尊重别名，加载器语法（例如markup-inline-loader!./my-element.html）或模块路径。

processStyleLinks Boolean

如果设置为 true，则加载器将重写<link import="css" href="...">或者<link rel="stylesheet" href="...">位于 dom 模块内部<style>require('...')</style>。这将允许文件由 webpack 配置中设置的加载器来处理它们的文件类型。

任何<link>在内部<dom-module>但不在内部的内容<template>都会被添加到<template>标签在文件中出现的顺序中。<dom-module> <link rel =“stylesheet”href =“file1.css”> <template> <link rel =“stylesheet”href =“file2.css”> </ template> </ dom-module>会产生需要（'file1.css'）</ style> <style> require（'file2.css'）</ style> </ template> </ dom-module>

只有<link>当 href 是相对路径时，加载器才会替换。任何链接试图访问一个外部链接，即http，https或//不会被取代。

htmlLoader: Object

传递给 html-loader 的选项。请参阅 html-loader。

与 Babel（或其他 JS 转译器）一起使用

如果您想要传输元素<script>块的内容，则可以链接另外的加载器。

module: {
  loaders: [
    {
      test: /\.html$/,
      use: [
        // Chained loaders are applied last to first
        { loader: 'babel-loader' },
        { loader: 'polymer-webpack-loader' }
      ]
    }
  ]
}

// alternative syntax

module: {
  loaders: [
    {
      test: /\.html$/,
      // Chained loaders are applied right to left
      loader: 'babel-loader!polymer-webpack-loader'
    }
  ]
}

使用 HtmlWebpackPlugin

根据您如何配置 HtmlWebpackPlugin，您可能会遇到与 polymer-webpack-loader 的冲突。

例：

{
  test: /\.html$/,
  loader: 'html-loader',
  include: [
    path.resolve(__dirname, './index.html'),
  ],
},
{
  test: /\.html$/,  
  loader: 'polymer-webpack-loader'
}

这会根据 html-loader 使用的进程将你的 index.html 文件暴露给 polymer-webpack-loader。在这种情况下，您需要从 polymer-webpack-loader中排除您的 html 文件，或者寻找其他方法来避免这种冲突。请参阅：html-webpack-plugin 模板选项

Shimming

并非所有聚合物元素都被编写为模块执行，并且需要更改才能使用 webpack。遇到的最常见问题是因为模块不在全局范围内执行。变量，函数和类将不再是全局的，除非它们被声明为全局对象（窗口）上的属性。

class MyElement {} // I'm not global anymore
window.myElement = MyElement; // Now I'm global again

对于外部库代码，webpack 提供匀场选项。

使用 exports-loader 将模块导出添加到期望符号为全局的组件。

脚本需要this引用关键字时使用 imports-loader window。

当脚本需要全局定义变量（但现在是模块导出）时，使用 ProvidePlugin 添加模块导入语句。

使用 NormalModuleReplacementPlugin 让 webpack 交换脚本的模块兼容版本。

您可能需要将多种匀场技术应用于相同的组件。

Boostrapping 您的应用程序

webcomponent polyfills 必须按特定顺序添加。如果您不延迟加载组件的主包，您将在浏览器控制台中看到以下例外情况：

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

参考演示 html 文件以获取正确的加载顺序。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18