# extract-loader-path-correction

> webpack loader to extract HTML and CSS from the bundle

Latest version **1.0.3** (published 2018-03-09) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install extract-loader-path-correction
pnpm add extract-loader-path-correction
yarn add extract-loader-path-correction
bun add extract-loader-path-correction
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-03-09 |
| First published | 2017-12-21 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | liyongleihf2006 |
| Maintainers | liyongleihf2006 |
| Keywords | webpack, loader, extract, html, css, path, relative |

## Links

- npm: https://www.npmjs.com/package/extract-loader-path-correction
- Repository: https://github.com/liyongleihf2006/extract-loader-path-correction
- Homepage: https://github.com/liyongleihf2006/extract-loader-path-correction#readme
- Issues: https://github.com/liyongleihf2006/extract-loader-path-correction/issues
- npm.io page: https://npm.io/package/extract-loader-path-correction

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2018-03-09
- 1.0.2 — 2018-01-15
- 1.0.0 — 2017-12-21

## README

extract-loader-path-correction
----
对[extract-loader](https://www.npmjs.com/package/extract-loader)的一个修改,主要是校正引用文件路径不正确的问题

关于extract-loader的使用方式和api等请查看原项目[extract-loader](https://www.npmjs.com/package/extract-loader)

----


**为什么要进行修改?**

首先看下项目结构

现在项目的目录结构如下

```
  app
   | index.tpl.html
   | vender
        | css
           | index.css
           | image
               | test.png
```  
index.tpl.html 中的内容如下

```
  <html>
    <head>
        <link rel="stylesheet" href="./vender/index.css">
    </head>
    <body>   
    </body>
  </html>
```  
index.css 中的内容如下

```
  html{
    background: url(./image/test.png);
  }
```  
index.js 是空文件

webpack.config.js 中的内容如下

```
var path = require('path');
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
    entry:{
       bundle:path.join(__dirname,"app/index.js")
    },
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[{
            test:/\.png$/,
            use: [{
                loader:'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }],
            include:[path.join(__dirname, 'app')]  
        },{
            test:/\.html$/,
            use: [{
                loader:'html-loader',
                options: {
                    attrs: ['img:src', 'link:href','script:src','audio:src'],
                }
            }],
            include:[path.join(__dirname, 'app')]  
        },{
            test: /\.css$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[path][name].[ext]"
                    }
                },
                {
                    loader: "extract-loader"
                },
                {
                    loader: 'css-loader'
                }
            ],
            include:[path.join(__dirname, '/app')]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:path.join(__dirname,"app/index.tpl.html")
        })
    ]
 }
```  

输出到 dist 中目录结构如下

```
app
  | index.css
  | vender
      | image
          | test.png
bundle.js
index.html
```  
index.html 中的内容如下

```
<html>
    <head>
        <link rel="stylesheet" href="app/vender/index.css">
    </head>
    <body>   
    <script type="text/javascript" src="bundle.js"></script></body>
</html>
```  


index.css 中的内容如下

```
html{
    background: url(app/vender/image/test.png);
}
```  
上面向目标文件夹(dist)输出的内容中index.css引用图片test.png的路径 app/vender/image/test.png 是有问题的,这时候我们希望test.png的引用路径应该是./image/test.png，这才是正确的.

因此对[extract-loader](https://www.npmjs.com/package/extract-loader)的进行了修改.

将 webpack.config.js 中的 loader: "extract-loader" 改为 loader: "extract-loader-path-correction"

```
{
  loader: "extract-loader-path-correction"
},
```  
   
再次进行打包后项目结构没有发生变化,但index.css中的内容变成了这样

```
html{
    background: url(./image/test.png);
}
```  
这正是我们所想要的!

----

该修改仅仅是使得引用路径进行修正,对[extract-loader](https://www.npmjs.com/package/extract-loader)的其他功能以及配置等没有任何影响.

上面的解释中只是使用了图片作为示例,实际上可以修正引入的任何资源的路径,比如字体文件,svg文件等等等等...

当然想要正确引入各种资源文件还需要使用各种loader才行,其他的疑惑和使用方式请前往[extract-loader](https://www.npmjs.com/package/extract-loader)查看

---
_Source: https://npm.io/package/extract-loader-path-correction · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._