faizanjehangir faizanjehangir - 5 months ago 157
AngularJS Question

webpack not loading svgs

I have the following

app structure
:

/webapp
/lib
/assets
ic_add_black_24px.svg
ic_clear_black_24px.svg
..
..


Here is my
webpack.config.js
:

var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
HtmlWebpackPlugin = require('html-webpack-plugin');


var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),

// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),

// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};

module.exports = config;


Here is how I am using the
svg asset
in one of my html file:

<md-card-header>
<span flex></span>
<md-button class="md-icon-button" aria-label="remove condition" style="background-color: #DCD8D8" ng-click="event.removeCondition(condition)">
<md-icon md-svg-src="/lib/assets/ic_clear_black_24px.svg"></md-icon>
</md-button>
</md-card-header>


When I do
rm -rf www/* && webpack -p
, it creates the bundle successfully, but without any assets loaded.. I have tried to use
svg-loader, url-loader, file
, but none of them works.. What am I doing wrong here?

Answer

In case it helps anyone, I ended up using CopyWebpackPlugin to load the assets manually to my required location. This is what my webpack.config looks like now:

var path = require('path'),
    webpack = require("webpack"),
    libPath = path.join(__dirname, 'lib'),
    wwwPath = path.join(__dirname, 'www'),
    pkg = require(path.join(__dirname,'package.json')),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin');


var config = {
    entry: path.join(libPath, 'index.js'),
    output: {
        path: path.join(wwwPath),
        filename: 'bundle-[hash:6].js'
    },
    module: {
        loaders: [{
            test: /\.html$/,
            loader: 'file?name=templates/[name]-[hash:6].html'
        }, {
            test: /\.(png|jpg|svg)$/,
            loader: 'svg-url-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
        }, {
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.scss$/,
            loader: "style!css!autoprefixer!sass"
        }, {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: "ng-annotate?add=true!babel"
        }, {
            test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
            loader: 'file?name=fonts/[name].[ext]'
        }]
    },
    plugins: [
        new CopyWebpackPlugin([{
                from: 'lib/assets',
                to: wwwPath + '/lib/assets'
            }]),
        // HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            pkg: pkg,
            template: path.join(libPath, 'index.html')
        }),

        // OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
        new webpack.optimize.OccurenceOrderPlugin(),

        // Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
        new webpack.optimize.DedupePlugin()
    ]
};

module.exports = config;