externe URL in Webpack Alias

Mein Team hat alle Bilder der Unternehmens-Website in ein CDN verschoben. (https://cdn.irobo.co.kr/images) Allerdings würde Ich mag diese Bilder verwenden, ohne aktuelle Codebasis zu ändern, die viel hat: (reactjs Code)externe URL in Webpack Alias

<image src={require('img/common/logo.jpg')} />

hier ist die webpack Config für die Website:

{ 
    module: { 
    loaders:[{ 
     test: /\.(png|jpg)$/, 
     loader: 'file-loader?name=[name].[ext]', 
    }], 
    } 
    ... 
    resolve: { 
    alias: { 
     img: path.join(srcPath, 'app/img'), 
    } 
    } 
}

Hier ist, was ich versucht:

... 
    resolve: { 
    alias: { 
     img: 'https://cdn.irobo.co.kr/images', 
    } 
    } 
}

Quelle

2017-02-07 이창규

Webpack den Code kompiliert. Während des Kompilierens werden Bilder transformiert, was Sie verwenden möchten, ist Link zu Bildern. Und laden Sie, wenn Sie laden. Es kann durch erreicht werden Wilder Idee: Sie können einen IMG Loader schreiben, der nur die Bild-URLs ersetzt. –

Bündelung Vermögen von externen URLs mit Webpack

Das URL-Loader-Plugin für Webpack bietet Ihnen die Möglichkeit, Assets von externen URLs zu verwenden, indem Sie sie in base64 kodieren.

Die URL-Loader funktioniert wie die Datei-Loader, kann aber eine Daten URL zurück, wenn die Datei kleiner als ein Byte-Grenze.

Das Limit kann mit einem Abfrageparameter angegeben werden. (Standardwert ist limit)

Denken Sie daran, das Plugin url-loader als Projektabhängigkeit zu installieren.

npm install --save-dev url-loader

Konfigurieren Sie die URL-loader-Plugin

Hier ist ein Beispiel webpack Config die URL-loader-Plugin einzurichten.

webpack.config.js

module.exports = { 
    entry: './main.js', 
    output: { 
    path: './build', // This is where the images and js will go 
    publicPath: 'http://mycdn.com/', // used to generate URLs to e.g. images 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     // use ! to chain loaders 
     { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     // inline base64 URLs for <=8k images, direct URLs for the rest 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } 
    ] 
    } 
};

Import, die Vermögenswerte in Ihrer App

app.jsx

import image from '../build/image.jpg'; 

<img src={image} />

Quelle

2017-02-07 10:20:20 therewillbecode

externe URL in Webpack Alias ​​

Antwort

Verwandte Themen

externe URL in Webpack Alias