Javascript SLDS svg图标不与Webpack 2一起呈现
从SLDS节点模块（Salesforce Lightning Design System）获取SVG图标进行渲染时遇到问题。我下面的例子在Webpack1.x项目中可以很好地使用 在dev控制台中，当呈现Javascript SLDS svg图标不与Webpack 2一起呈现,javascript,svg,webpack,salesforce-lightning,Javascript,Svg,Webpack,Salesforce Lightning,从SLDS节点模块（Salesforce Lightning Design System）获取SVG图标进行渲染时遇到问题。我下面的例子在Webpack1.x项目中可以很好地使用 在dev控制台中，当呈现use标记使用的svg时，我可以看到404。我尝试了不同的加载程序类型，并模仿了字体的处理方式（因为它们工作得很好），但我似乎无法让Webpack识别SLDS节点模块中的SVG文件并将其捆绑/发送。我尝试将下面组件的源代码复制到Webpack1.x项目中，效果很好。如有任何建议，将不胜感激 组件
useimport React, { PropTypes } from 'react';
import './styles.scss'
export default React.createClass({
displayName: 'App',
render() {
return (
<div className="slds-page-header">
<div className="slds-grid">
<div className="slds-col slds-has-flexi-truncate">
<div className="slds-media slds-no-space slds-grow">
<div className="slds-media__figure">
<svg className="slds-icon slds-icon-standard-user" aria-hidden="true">
<use xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
</svg>
</div>
<div className="slds-media__body">
<p className="slds-text-title--caps slds-line-height--reset">Icons</p>
<h1 className="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Won't Load</h1>
</div>
</div>
</div>
</div>
</div>
);
}
});
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var RESOURCES = path.resolve(__dirname, 'src/main/resources');
var ASSETS = path.resolve(RESOURCES, 'assets');
var APP = path.resolve(RESOURCES, 'app');
var DIST = path.resolve(ASSETS, 'dist');
var extractCSS = new ExtractTextPlugin('[name].css');
var extractSCSS = new ExtractTextPlugin('[name].scss');
module.exports = {
devtool: 'source-map',
devServer: {
contentBase: ASSETS,
compress: true,
port: 8080
},
entry: {
app: APP + '/index.js'
},
resolve: {
extensions: [ '.js', '.jsx', '.json']
},
output: {
path: DIST,
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.jsx?/,
use: 'babel-loader',
include: [
APP
]
},
{ test: /\.json/, loader: ['json-loader'] },
{
test: /\.(gif|jpe?g|png)/,
use: [
{ loader: 'url-loader' }
]
},
{
test: /\.svg/,
use: { loader: 'url-loader' }
},
{
test: /\.(eot|woff|woff2|ttf)$/,
use: {
loader: 'url-loader',
options: {
limit: 30,
name: 'assets/fonts/webfonts/[name].[ext]'
}
}
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: { sourceMap: true }
}
})
},
{
test: /\.scss$/,
use: extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
outputStyle:'expanded',
sourceMap: true,
sourceMapContents: true
}
}
]
})
}
]
},
plugins: [ extractCSS ]
};
> webpack
Hash: 413338d67a2515c58948
Version: webpack 2.2.1
Time: 10382ms
Asset Size Chunks Chunk Names
assets/fonts/webfonts/SalesforceSans-Light.woff2 27.7 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff2 28.3 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Light.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff2 27.6 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff 36.2 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff 34.9 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff2 27.7 kB [emitted]
bundle.js 1.74 MB 0 [emitted] [big] app
bundle.js.map 2.1 MB 0 [emitted] app
> webpack
Hash: 413338d67a2515c58948
Version: webpack 2.2.1
Time: 10382ms
Asset Size Chunks Chunk Names
assets/fonts/webfonts/SalesforceSans-Light.woff2 27.7 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff2 28.3 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Light.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff2 27.6 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff 36.2 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff 34.9 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff2 27.7 kB [emitted]
bundle.js 1.74 MB 0 [emitted] [big] app
bundle.js.map 2.1 MB 0 [emitted] app
> webpack
Hash: 413338d67a2515c58948
Version: webpack 2.2.1
Time: 10382ms
Asset Size Chunks Chunk Names
assets/fonts/webfonts/SalesforceSans-Light.woff2 27.7 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-BoldItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff 36 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Italic.woff2 28.3 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Light.woff 35 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Bold.woff2 27.6 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff 36.2 kB [emitted]
assets/fonts/webfonts/SalesforceSans-LightItalic.woff2 28.5 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff 34.9 kB [emitted]
assets/fonts/webfonts/SalesforceSans-Regular.woff2 27.7 kB [emitted]
bundle.js 1.74 MB 0 [emitted] [big] app
bundle.js.map 2.1 MB 0 [emitted] app
xmlns=”http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“