Actually the main link of example is [this link](https://github.com/DigitalKwarts/react-server-render-example) and the stable version of it will be always here.
For your exact answer you can use below code to import the `file-loader` for all media:
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: 'font/',
outputPath: 'font/'
}
},
{
test: /\.(jpg|png)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: 'img/',
outputPath: 'img/'
}
}
After this setting you can access to your media by using this these addresses:
**`CSS` :**
background: url('./img/myMedia.jpg');
@font-face {
font-family: 'as-you-wish';
src: url('./font/yourFont.eot');
}
**`DOM` :**
<img src='/dist/img/myMedia.jpg' />
But remember this configs is in `rule:` after second object, so your result config must be like these:
module: {
rules: [
{
test: /\.(js|jsx|jss)$/,
exclude: /(node_modules[\/\\])(?!mqtt)/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'shebang-loader',
}
]
},
{
test: /\.pcss$/,
exclude: /(node_modules\/)/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]',
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
config: {
path: `${__dirname}/../postcss/postcss.config.js`,
}
}
}
]
})
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: 'font/',
outputPath: 'font/'
}
},
{
test: /\.(jpg|png)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: 'img/',
outputPath: 'img/'
}
}
],
}
So after it pay attention to `[name].[ext]` in `name:`, I change it to `[hash:base64:5].[ext]` for production version.
For any issues, leave a issue message in [Github repo](https://github.com/DigitalKwarts/react-server-render-example).
Opera, Safari, Firefox and Chrome now all share a set of enhanced Array methods for optimizing many common loops.
You may not need all of them, but they can be very useful, or would be if every browser supported them.
Mozilla Labs published the algorithms they and [WebKit][1] both use, so that you can add them yourself.
**filter** returns an array of items that satisfy some condition or test.
**every** returns true if every array member passes the test.
**some** returns true if any pass the test.
**forEach** runs a function on each array member and doesn't return anything.
**map** is like forEach, but it returns an array of the results of the operation for each element.
These methods all take a function for their first argument and have an optional second argument, which is an object whose scope you want to impose on the array members as they loop through the function.
Ignore it until you need it.
**indexOf** and **lastIndexOf** find the appropriate position of the first or last element that matches its argument exactly.
(function(){
var p, ap= Array.prototype, p2={
filter: function(fun, scope){
var L= this.length, A= [], i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
val= this[i];
if(fun.call(scope, val, i, this)){
A[A.length]= val;
}
}
++i;
}
}
return A;
},
every: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i<L){
if(i in this && !fun.call(scope, this[i], i, this))
return false;
++i;
}
return true;
}
return null;
},
forEach: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
fun.call(scope, this[i], i, this);
}
++i;
}
}
return this;
},
indexOf: function(what, i){
i= i || 0;
var L= this.length;
while(i< L){
if(this[i]=== what)
return i;
++i;
}
return -1;
},
lastIndexOf: function(what, i){
var L= this.length;
i= i || L-1;
if(isNaN(i) || i>= L)
i= L-1;
else
if(i< 0) i += L;
while(i> -1){
if(this[i]=== what)
return i;
--i;
}
return -1;
},
map: function(fun, scope){
var L= this.length, A= Array(this.length), i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
A[i]= fun.call(scope, this[i], i, this);
}
++i;
}
return A;
}
},
some: function(fun, scope){
var i= 0, L= this.length;
if(typeof fun== 'function'){
while(i<L){
if(i in this && fun.call(scope, this[i], i, this))
return true;
++i;
}
return false;
}
}
}
for(p in p2){
if(!ap[p])
ap[p]= p2[p];
}
return true;
})();
[1]: http://en.wikipedia.org/wiki/WebKit
