如何使用webpack处理动态图像路径

Question

我已经设法在一个大型应用程序中处理了我的大多数图标，但仍有两个用例没有被捕获。

• 角度模板中使用的动态路径
  <md-icon md-svg-src="{{'/assets/icons/ic-' + $ctrl.icon + '.svg'}}"></md-icon>

• 在传递到角度模板的组件中用作可变路径

即类似的东西

class Comp {
this.settingsLinks = [
{name: 'advanced settings', icon: '/assets/icons/ic-settings.svg'}
]
}

然后在这样的模板中使用

<div ng-repeat="setting in $ctrl.settingsLinks">
<md-icon md-svg-src="{{setting.icon}}"></md-icon>
</div>

我的webpack配置是这样

module.exports = {
module: {
loaders: [
{
test: /.html$/,
loaders: 'html-loader',
options: {
attrs: ['md-icon:md-svg-src', 'img:ng-src'],
root: path.resolve(__dirname, '../src'),
name: '[name]-[hash].[ext]'
}
},
{
test: /.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre'
},
{
test: /.(jpe?g|png|gif|svg)$/,
loader: 'file-loader',
options: {
name() {
return '[name]-[hash].[ext]';
}
}
},
{
test: /.js$/,
exclude: /node_modules/,
loaders: [
'ng-annotate-loader',
'babel-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new ExtractTextPlugin('index-[contenthash].css'),
],
output: {
path: path.join(process.cwd(), conf.paths.dist),
filename: '[name]-[hash].js'
},
entry: {
app: [`./${conf.path.src('app/app.module.js')}`],
vendor: Object.keys(pkg.dependencies)
},
};

我一直将webpack.ContextReplacementPlugin视为处理动态路径的一种潜在方式。有人了解我想要实现的目标吗？我希望能够为缓存破坏目的对名称进行散列，但我正在努力解决如何在js和模板中处理动态路径的问题。

Answer 1

https://webpack.js.org/guides/dependency-management/

webpack允许访问require.context，它允许告诉webpack动态路径可能/应该是什么，它消除了所需内容的不确定性，并允许您从其原始名称返回新散列的图标名称。它不需要它们都有导入成本——如果我理解正确的话，它只是在新旧名称之间创建了一个映射。

例如，这是说抓取icons文件夹中的所有文件名抓取以ic开头的文件名-因为这是我们对图标的命名方案，这在构建时创建了一个对象，我相信这是所有可能使用的图标中的一个。

const ICONS = require.context('../../../assets/icons', true, /ic-[a-zA-Z0-9.-]/);

返回的是一个函数，您可以在其中传递原始图标名称并返回哈希版本。您也可以使用ICONS.keys()来获得一组图标。

下面是我用来提供一些图标的一个示例用法。

const ICONS = require.context('../../../assets/icons', true, /ic-[a-zA-Z0-9.-]/);
export function getIconFromPath(path) {
return ICONS(path);
}
function getIconsFromPaths(obj) {
Object.keys(obj).forEach(key => Object.assign(obj, {[key]: ICONS(obj[key])}));
return obj;
}
export default getIconsFromPaths({
ARCHIVED: './ic-status-warning.svg',
CANCELLED: './ic-status-cancelled.svg',
CONFLICT: './ic-status-warning.svg',
DRAFT: './ic-status-draft.svg',
EARLIER: './ic-status-published.svg',
ENDED: './ic-status-ended.svg',
ERROR: './ic-status-published-failure.svg',
FAILURE: './ic-status-failure.svg',
INVALID: './ic-status-warning.svg',
IN_PROGRESS: './ic-content-publish-in-progress.svg',
LATEST: './ic-status-published-latest.svg',
LOCKED: './ic-status-locked.svg',
PUBLISHED: './ic-status-published.svg',
PUBLISHING: './ic-content-publish-in-progress.svg',
SCHEDULED: './ic-status-scheduled.svg',
SCHEDULING: './ic-content-publish-in-progress.svg',
UNLOCKED: './ic-status-unlocked.svg',
UPDATED: './ic-webhook-request-success.svg',
UNPUBLISHING: './ic-content-publish-in-progress.svg',
UNSCHEDULING: './ic-content-publish-in-progress.svg',
VALID: './ic-content-valid-tick.svg',
WARNING: './ic-status-warning.svg'
});

因为webpack现在知道可以从这里返回什么，所以它现在可以对名称进行散列，并且可以在构建时做各种好的事情，比如优化。

因此，我的问题中给出的示例类将由解决

import { getIconFromPath } from '../icons/;
class Comp {
this.settingsLinks = [
{
name: 'advanced settings',
icon: getIconFromPath('./ic-settings.svg')
}
]
}