javascript - Webpack and toastr - Stack Overflow

admin管理员组

文章数量:1345290

I am trying to load and bundle toastr as a dependency using webpack.

here is the entire webpack config file

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
    entry: {
        main: './wwwroot/js/mainEntry.js',
        vendor: ['jquery', 'tether',
            'bootstrap', 'jquery-colorbox',
            'jquery-confirm', 'jquery-validation',
            'jquery-validation-unobtrusive',
            'toastr', 'jquery.nicescroll',]
    },
    output: {
        filename: '/js/[name].js',
        path: path.resolve(__dirname, 'wwwroot'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader?name=[name].[ext]&publicPath=/fonts/&outputPath=/fonts/'
            },
            {
                test: /\.(png|jpe?g|gif|ico)$/,
                loader: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/'
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            // (the mons chunk name)
            filename: "/js/vendor.js",
            // (the filename of the mons chunk)
            minChunks: 2,
        }),
        new ExtractTextPlugin({
            filename: 'css/[name].min.css'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
};

and my entry js file as

//JS
import 'jquery-colorbox';
import 'slick-carousel';
import toastr from 'toastr';

//CSS
import './../../node_modules/bootstrap/dist/css/bootstrap.css';
import './../../node_modules/slick-carousel/slick/slick.css';
import './../../node_modules/jquery-colorbox/colorbox.css';
import './../../node_modules/toastr/build/toastr.css';
import './../../node_modules/jquery-confirm/css/jquery-confirm.css';
import './../../node_modules/font-awesome/css/font-awesome.css';
import './../../Modules/Components/Menu/menu.css';
import './../../wwwroot/css/lahuritv.css';

The bundle is created without any errors. And I can see that the toastr script is included in the bundle when I look at the output bundle. But the problem is that the variable toastr is not available in the browser window.

I tried looking for similar issue but couldn't find any. This is my first time trying to learn webpack. Any help is appreciated.

I am trying to load and bundle toastr as a dependency using webpack.

here is the entire webpack config file

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
    entry: {
        main: './wwwroot/js/mainEntry.js',
        vendor: ['jquery', 'tether',
            'bootstrap', 'jquery-colorbox',
            'jquery-confirm', 'jquery-validation',
            'jquery-validation-unobtrusive',
            'toastr', 'jquery.nicescroll',]
    },
    output: {
        filename: '/js/[name].js',
        path: path.resolve(__dirname, 'wwwroot'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader?name=[name].[ext]&publicPath=/fonts/&outputPath=/fonts/'
            },
            {
                test: /\.(png|jpe?g|gif|ico)$/,
                loader: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/'
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            // (the mons chunk name)
            filename: "/js/vendor.js",
            // (the filename of the mons chunk)
            minChunks: 2,
        }),
        new ExtractTextPlugin({
            filename: 'css/[name].min.css'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
};

and my entry js file as

//JS
import 'jquery-colorbox';
import 'slick-carousel';
import toastr from 'toastr';

//CSS
import './../../node_modules/bootstrap/dist/css/bootstrap.css';
import './../../node_modules/slick-carousel/slick/slick.css';
import './../../node_modules/jquery-colorbox/colorbox.css';
import './../../node_modules/toastr/build/toastr.css';
import './../../node_modules/jquery-confirm/css/jquery-confirm.css';
import './../../node_modules/font-awesome/css/font-awesome.css';
import './../../Modules/Components/Menu/menu.css';
import './../../wwwroot/css/lahuritv.css';

The bundle is created without any errors. And I can see that the toastr script is included in the bundle when I look at the output bundle. But the problem is that the variable toastr is not available in the browser window.

I tried looking for similar issue but couldn't find any. This is my first time trying to learn webpack. Any help is appreciated.

• javascript
• webpack
• webpack-2
• toastr

Share Improve this question Follow asked Mar 11, 2017 at 7:43 Nabin Karki ThapaNabin Karki Thapa 48111 gold badge66 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Simple solution :

//app.js
import toastr from 'toastr'
window.toastr = toastr

Webpack does not expose the modules you import, it bundles your code together with the needed dependencies, but they are still modular and have their own scope. Webpack does not just blindly bine the sources of all the files and certainly does not make everything global. If the entry file you posted is the whole file, then you're not doing anything at all.

Instead with webpack you would do the work in the JavaScript files you bundle. So to speak, all you include in your HTML are the bundles created by webpack, you don't include other scripts that try to access something in the bundle, but you rather do it directly in your bundle.

Of course you could expose it to window by explicitly defining it: window.toastr = toastr after importing toastr, but polluting the global scope is generally not a good idea and it's no different from just including toastr in a <script> tag. If the bundle is just supposed to be used as a library you could have a look at Authoring Libraries. But I think you're just doing a regular web app and you should get all the code together to be bundled by webpack and not rely on it in another <script> tag.

You should go through the Getting Started guide of the official docs. The example is very tiny (creates one DOM element) but shows you the concept of webpack apps and also uses an external dependency.

本文标签： javascriptWebpack and toastrStack Overflow