在特定的Webpack构建(角度2)的情况下,如何将CSS文件中的资产url()替换为第三方域? [英] How to replace assets url()s in CSS files to a 3rd party domain in case of specific webpack build (angular 2)?
问题描述
我想通过以下方式在CSS中使用url():
I want to use the url()s in my CSS in the following way:
.someImage {
background: url(/assets/img/some-image.png);
}
如果我使用的是开发版本(config/webpack.dev.js),我希望将其翻译为 background:url(/assets/img/some-image.png); 代码>(默认情况下有效).
In case I'm using development build (config/webpack.dev.js), I want it to to be translated to background: url(/assets/img/some-image.png);
(as it works by default).
但是,如果我使用的是生产版本(config/webpack.prod.js),我希望将其转换为 background:url(http://some-3rd-party-domain.com/资产/img/some-image.png);
However In case I'm using production build (config/webpack.prod.js), I want it to be translated to background: url(http://some-3rd-party-domain.com/assets/img/some-image.png);
考虑 http://some-3rd-party-domain.domain
,因为它是与托管角度应用程序的域完全不同的域.
Think about the http://some-3rd-party-domain.com
as it is a completely different domain than the one that servers the angular app.
另一个重要的事情是我不想替换css文件中的所有路径.这意味着我只想在url()与特定路径匹配(在此示例中为/assets/*)时才替换它们.
Another important thing is that I don't want to replace all the paths in my css files. Which means that I want to replace url()s only if they match a specific path (in this example: /assets/*).
如果不进行深度黑客攻击,是否有可能?如果是,怎么办?
在这里,您可以从我当前的配置中找到一些详细信息:
Here you can find some details from my current config:
config/webpack.common.js
的相关部分:
// ...
{
test: /\.css$/,
loader: extractVendorCSS.extract({
fallbackLoader: 'style-loader', loader: 'css-loader' }),
include: [/node_modules/]
},
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [/node_modules/]
},
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url'
}
// ...
config/webpack.dev.js
和 config/webpack.prod.js
均通过以下方式包含特定于环境的URL信息:
Both config/webpack.dev.js
and config/webpack.prod.js
contains the environment specific URL info in the following way:
config/webpack.dev.js
:
// ...
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://localhost:3000/assets/mock-data/';
const ASSETS_URL = process.env.API_URL = 'http://localhost:3000/assets/';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
API_URL: API_URL,
ASSETS_URL: ASSETS_URL,
port: PORT,
ENV: ENV,
});
// ...
config/webpack.prod.js
:
// ...
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://some-api-url/rest/';
const ASSETS_URL = process.env.ASSETS_URL = 'http://some-3rd-party-domain.com/assets/';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
API_URL: API_URL,
ASSETS_URL: ASSETS_URL,
port: PORT,
ENV: ENV,
});
// ...
谢谢!
推荐答案
我认为,您应该查看有关publicPath的文档: http://webpack.github.io/docs/configuration.html#output-公共路径
I think, you should check the documentation about publicPath: http://webpack.github.io/docs/configuration.html#output-publicpath
output: {
path: "/home/proj/public/assets",
publicPath: ENV === "development"? "/assets/" : "http://some-3rd-party-domain.com/assets/"
}
但是有一个重要时刻:
您使用图片的绝对路径(背景:url(/assets/img/some-image.png);
),而css-loader不会对您的网址做任何操作
您应该切换到另一种语法: background:url(〜img/some-image.png);
有关更多信息,请参见 https://github.com/webpack-contrib/css-loader
But there is one important moment:
you use an absolute path for images (background: url(/assets/img/some-image.png);
) and css-loader will do nothing with your urls
You should switch to another syntax: background: url(~img/some-image.png);
more information in https://github.com/webpack-contrib/css-loader
这篇关于在特定的Webpack构建(角度2)的情况下,如何将CSS文件中的资产url()替换为第三方域?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!