So I\'m trying to build a map app using webpack
and leaflet
. I can require leaflet.js
from my map.js
file, but I can\'t call
I managed to do it easier. Just needed to add loaders for css and for png
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /\.png$/,
loader: 'url-loader',
query: { mimetype: 'image/png' }
}
]
So it turns out, the answer is a combination of webpack's resolve.alias and the file loader. My new webpack file looks like this:
'use strict'
var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
srcPath = path.join(__dirname, 'src');
module.exports = {
target: "web",
cache: true,
entry: {
app: path.join(srcPath, "index.js")
},
resolve: {
extensions: ['', '.html', '.js', '.json', '.scss', '.css'],
alias: {
leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css",
leaflet_marker: __dirname + "/node_modules/leaflet/dist/images/marker-icon.png",
leaflet_marker_2x: __dirname + "/node_modules/leaflet/dist/images/marker-icon-2x.png",
leaflet_marker_shadow: __dirname + "/node_modules/leaflet/dist/images/marker-shadow.png"
}
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"},
{test: /\.scss?$/, exclude: /node_modules/, loader: "style-loader!css-loader!sass-loader!"},
{test: /\.css?$/, loader: "style-loader!css-loader!"},
{test: /\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("common", "common.js"),
new HtmlWebpackPlugin({
inject: true,
template: "src/index.html"
}),
new webpack.NoErrorsPlugin()
],
output: {
path: path.join(__dirname, "dist"),
publicPath: "/dist/",
filename: "[name].js",
pathInfo: true
}
}
And then all I need to do is require the icons in the .js file
require("./sass/main");
require("leaflet_css");
require("leaflet_marker");
require("leaflet_marker_2x");
require("leaflet_marker_shadow");
Lovely!!! :)