Question

我想通过以下方式在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://some-3rd-party-domain.com/assets/img/some-image.png);

考虑http://some-3rd-party-domain.com，因为它与服务角度应用程序的域完全不同。

另一个重要的事情是我不想替换我的css文件中的所有路径。这意味着我只想在匹配特定路径时替换url（）s（在此示例中为：/ 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'
}
// ...

config/webpack.dev.js和config/webpack.prod.js以下列方式包含特定于环境的网址信息：

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,
});
// ...

谢谢！

Answer 1

我认为，您应该查看有关PublicPath的文档： http://webpack.github.io/docs/configuration.html#output-publicpath

＆＃13;

output: {
    path: "/home/proj/public/assets",
    publicPath: ENV === "development"? "/assets/" : "http://some-3rd-party-domain.com/assets/"
}

＆＃13;

但有一个重要时刻：
你使用绝对路径的图像（background: url(/assets/img/some-image.png);）和css-loader将不会对你的网址做任何事情

您应该切换到另一种语法：background: url(~img/some-image.png);
https://github.com/webpack-contrib/css-loader

中的更多信息

如果特定的webpack构建（角度2），如何将CSS文件中的资产url（）替换为第三方域？

1 个答案: