1. extract-loader

从bundle中提取HTML and CSS

extract-loader 动态地对给定的源代码进行计算，并将结果作为字符串返回。它的主要用例是在HTML和CSS中从各自的loader中解析url。使用 file-loader 发射extract-loader的结果作为单独的文件。

import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
// stylesheetUrl 将是最终样式表的哈希url。

extract-loader的工作原理类似于 extract-text-webpack-plugin ，它作为此插件的替代方案。在计算源代码时，它提供了一个假上下文，该上下文专门用于处理 html-loader 或 css-loader 生成的代码。因此，它可能在其他情况下不起作用。

1.1. 安装

npm install extract-loader

1.2. 示例

1.2.1. 提取一个 main.css

将CSS与webpack打包在一起有一些好处，比如在开发中引用带有散列url的图像和字体或模块热替换。另一方面，在生产环境中，根据JS的执行来应用样式表不是一个好主意。渲染可能会被延迟，甚至可能出现一个FOUC(无样式内容闪烁)。因此，在最终的生产构建中，将它们作为单独的文件保存还是更好的。

使用extract-loader，您可以引用您的main.css作为正则entry。以下webpack.config.js展示了如何在开发中使用 style-loader 加载样式，在生产中将其作为单独的文件。

const live = process.env.NODE_ENV === "production";
const mainCss = ["css-loader", path.join(__dirname, "app", "main.css")];

if (live) {
    mainCss.unshift("file-loader?name=[name].[ext]", "extract-loader");
} else {
    mainCss.unshift("style-loader");
}

module.exports = {
    entry: [
        path.join(__dirname, "app", "main.js"),
        mainCss.join("!")
    ],
    ...
};

1.2.2. 提取 index.html

你甚至可以添加index.html作为entry，只从那里引用您的样式表。您只需要告诉html-loader也要获取link:href:

const indexHtml = path.join(__dirname, "app", "index.html");

module.exports = {
    entry: [
        path.join(__dirname, "app", "main.js"),
        indexHtml
    ],
    ...
    module: {
        rules: [
            {
                test: indexHtml,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name]-dist.[ext]",
                        },
                    },
                    {
                        loader: "extract-loader",
                    },
                    {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src", "link:href"],
                            interpolate: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                loaders: [
                    {
                        loader: "file-loader",
                    },
                    {
                        loader: "extract-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                ],
            },
            {
                test: /\.jpg$/,
                loaders: [
                    {
                        loader: "file-loader"
                    },
                ],
            },
        ]
    }
};

转换前：

<html>
<head>
    <link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
    <img src="hi.jpg">
</body>
</html>

转换后

<html>
<head>
    <link href="7c57758b88216530ef48069c2a4c685a.css" type="text/css" rel="stylesheet">
</head>
<body>
    <img src="6ac05174ae9b62257ff3aa8be43cf828.jpg">
</body>
</html>

1.3. 选项

目前有一种选项:publicPath。如果您正在webpack的output 选项中使用相对publicPath，并将其提取到 file-loader 中，那么您可能需要它来设置提取出来的文件的位置。

Example:

module.exports = {
    output: {
        path: path.resolve("./dist"),
        publicPath: "dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "assets/[name].[ext]",
                        },
                    },
                    {
                        loader: "extract-loader",
                        options: {
                            publicPath: "../",
                        }
                    },
                    {
                        loader: "css-loader",
                    },
                ],
            }
        ]
    }
};

你需要另一个选项?那么你应该考虑一下:

1.4. 贡献

From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planing to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain.

All pull requests should have 100% test coverage (with notable exceptions) and need to pass all tests.

extract-loader

1. extract-loader

1.1. 安装

1.2. 示例

1.2.1. 提取一个 main.css

1.2.2. 提取 index.html

1.3. 选项

1.4. 贡献

1.5. License

1.6. Sponsors

results matching ""

No results matching ""