Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Getting toastr npm to play with webpack
import * as Toastr from 'toastr';
import './/../node_modules/toastr/build/toastr.css'; //You need style and css loader installed and set
Toastr.options.timeout = 2000; //Change the settings
Toastr.info('This works!');
//In case anyone was having the same issue in getting toastr to run with webpack and es6
var webpack = require('webpack');
var path = require('path');
var assetsPath = '/assets/javascript';
var destinationPointPath = '/dist';
// Why use ProvidePlugin and externals: http://stackoverflow.com/a/30587246/1771644
module.exports = {
entry: `${__dirname}` + '/javascript/src/app.js',
output: {
path: `${__dirname}`+ '/dist',
filename: 'co.js'
},
resolve :{
extensions: ["", ".js"]
},
externals: {
"jquery": "jQuery"
},
module: {
loaders: [
{
test: /\.css$/, loader: 'style-loader!css-loader'
},
{
test: /\.js$/, loader: 'babel',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
]
}
@pulverize

This comment has been minimized.

Copy link

@pulverize pulverize commented Oct 23, 2017

FYI according to WebPack documentation "loaders" is becoming extinct in favor of "rules"

Also I was so happy to find this gist but I just cannot get this to work. Granted it's a little funky from the asp prerendering and hot module reloading stuff that came with my boilerplate. But bootstrap and bootstrap.css are working alongside it - why won't toastr??

E: that code snippet is honestly too large and strange to post. Frustration though. Maybe something due to my webpack upgrade to v3.

@kcollignon

This comment has been minimized.

Copy link

@kcollignon kcollignon commented Aug 28, 2019

Great Gist, thank you!

Just fyi the timeout option is labeled timeOut

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.