Javascript 在特定的网页包构建(2)的情况下,如何将CSS文件中的资源url()替换为第三方域?
我想以以下方式在CSS中使用url():Javascript 在特定的网页包构建(2)的情况下,如何将CSS文件中的资源url()替换为第三方域?,javascript,angular,build,webpack,frontend,Javascript,Angular,Build,Webpack,Frontend,我想以以下方式在CSS中使用url(): .someImage { background: url(/assets/img/some-image.png); } 如果我使用的是开发构建(config/webpack.dev.js),我希望它被翻译成background:url(/assets/img/some image.png)(默认情况下工作时) 但是,如果我使用的是产品构建(config/webpack.prod.js),我希望它被翻译成background:url(http:/
.someImage {
background: url(/assets/img/some-image.png);
}
如果我使用的是开发构建(config/webpack.dev.js),我希望它被翻译成background:url(/assets/img/some image.png)代码>(默认情况下工作时)
但是,如果我使用的是产品构建(config/webpack.prod.js),我希望它被翻译成background:url(http://some-3rd-party-domain.com/assets/img/some-image.png);代码>
想想http://some-3rd-party-domain.com
因为它是一个与angular应用服务器完全不同的域
另一件重要的事情是,我不想替换css文件中的所有路径。这意味着我只想在url()与特定路径匹配时替换它们(在本例中为:/assets/*)
没有深度黑客攻击,这是可能的吗?如果是,如何进行?
在这里,您可以从我的当前配置中找到一些详细信息:
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'
}
// ...
// ...
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,
});
// ...
// ...
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,
});
// ...
config/webpack.dev.js
和config/webpack.prod.js
都以以下方式包含特定于环境的URL信息:
.someImage {
background: url(/assets/img/some-image.png);
}
config/webpack.dev.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'
}
// ...
// ...
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,
});
// ...
// ...
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,
});
// ...
config/webpack.prod.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'
}
// ...
// ...
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,
});
// ...
// ...
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的文档:
输出:{
路径:“/home/proj/public/assets”,
publicPath:ENV==“开发”?“/assets/”:“http://some-3rd-party-domain.com/assets/"
}