Skip to content

Commit 8a2c7f3

Browse files
committed
update readme
1 parent 71e3ad4 commit 8a2c7f3

File tree

2 files changed

+25
-7
lines changed

2 files changed

+25
-7
lines changed

README.md

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
# vue-asset-loader
22

3-
this is a file-loader wrapper for Vue and Webpack, solve the image relative path issues when HTML and CSS are not in the same directory.
3+
this is a `file-loader` wrapper for Vue and Webpack, solve the image relative path issues when HTML and CSS are not in the same directory.
4+
5+
## install
6+
7+
To begin, you'll need to install `vue-asset-loader`:
8+
9+
```console
10+
$ npm install vue-asset-loader --save-dev
11+
```
12+
13+
`vue-asset-loader` works like
14+
[`file-loader`](https://github.com/webpack-contrib/file-loader), but solve a file-loader`s relative path issue when image, css and html in diffrence directorys.
15+
16+
## purpose
417

518
if your output directory structure is like this:
619

@@ -17,28 +30,29 @@ script
1730
2.js
1831
```
1932
1.css load 1.png, the url in source code may be write like this `url(images/1.png)`, to support that, your webpack config maybe like this:
20-
```
33+
```js
2134
{
2235
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
2336
use: [{ loader: 'file-loader', options: { publicPath: '../', name: '/images/[name].[ext]?[hash]' }]
2437
}
2538
```
39+
2640
then webpack will translate `images/1.png` to `../images/1.png`, this does solve the issues, but wait, if your html has img tag that:
27-
```
41+
```html
2842
<img src="image/2.png">
2943
```
3044
webpack will translate `images/2.png` to `../images/2.png`, it leads html load `2.png` failure, so file-loader can't tell the picture from HTML or CSS.
3145
vue-asset-loader just solving this issues!
3246
your webpack config can be like this:
3347
34-
```
48+
```js
3549
{
3650
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
3751
use: [{ loader: 'vue-asset-loader', options: { publicPath: '', publicStylePath: '../', name: '/images/[name].[ext]?[hash]' }]
3852
}
3953
```
4054
or
41-
```
55+
```js
4256
{
4357
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
4458
use: [{
@@ -54,3 +68,7 @@ or
5468
}
5569
```
5670
vue-asset-loader will choose `publicPath` or `publicStylePath` based on the image from HTML or CSS.
71+
72+
## License
73+
74+
#### [MIT](./LICENSE)

index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function handlePath (path, url) {
66
else return path + '/' + url;
77
}
88
let originPublicPath = undefined;
9-
module.exports = function loader (content) {
9+
module.exports = function loader () {
1010
let options = loaderUtils.getOptions(this) || {};
1111
if (options.publicStylePath) {
1212
if (originPublicPath === undefined) originPublicPath = options.publicPath;
@@ -18,5 +18,5 @@ module.exports = function loader (content) {
1818
}
1919

2020
const fileLoader = require('file-loader');
21-
return fileLoader.call(this, content);
21+
return fileLoader.apply(this, arguments);
2222
};

0 commit comments

Comments
 (0)