extract-loader

webpack 加载器从软件包中提取 HTML 和 CSS。

extract-loader 会即时评估给定的源代码并将结果作为字符串返回。它的主要用例是解决来自各自装载器的 HTML 和 CSS 内的 URL。使用 file-loader 将提取器加载器的结果作为单独的文件发送。

import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
// stylesheetUrl will now be the hashed url to the final stylesheet

提取器加载器的工作方式与 extract-text-webpack-plugin 类似，意味着它是一个精简的替代方案。评估源代码时，它提供了一个虚假的上下文，它专门用于处理由 html 或 css-loader 生成的代码。因此它可能不适用于其他情况。

安装

npm install extract-loader

例子

使用 webpack 捆绑 CSS 具有一些很好的优点，如引用图像和带有哈希 URL 的字体或开发中的热模块替换。另一方面，在生产中，根据 JS 执行来应用样式表不是一个好主意。渲染可能会延迟，甚至可能会看到FOUC。因此，最好将它们作为最终生产版本中的单独文件。

用 extract-loader，你可以引用你main.css的常规entry。下面webpack.config.js显示了如何使用开发中的样式加载器加载样式，并将其作为生产中的单独文件加载。

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("!")
    ],
    ...
};

提取 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>

选项

目前只有一个选择：publicPath。如果您publicPath在 webpack 的输出选项中使用相对并使用该选项提取文件，则file-loader可能需要这样做来说明提取文件的位置。

例：

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",
                    },
                ],
            }
        ]
    }
};

你需要另一种选择？那么你应该考虑一下：

贡献

从打开错误报告到创建拉取请求：每个贡献都受到赞赏和欢迎。如果您打算实施新功能或更改 api，请首先创建问题。这样我们可以确保你的珍贵工作不是徒劳的。

所有拉取请求应该有100％的测试覆盖率（值得注意的例外），并且需要通过所有测试。

调用npm test运行单元测试

调用npm run coverage查看测试范围（使用 istanbul）