Webpack 和 toastr

Question

我正在尝试使用 webpack 加载和捆绑 toastr 作为依赖项。

这里是整个 webpack 配置文件

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 commons chunk name)
            filename: "/js/vendor.js",
            // (the filename of the commons chunk)
            minChunks: 2,
        }),
        new ExtractTextPlugin({
            filename: 'css/[name].min.css'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
};

我的入口 js 文件为

//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';

捆绑包的创建没有任何错误。当我查看输出包时，我可以看到 toastr 脚本包含在包中。但问题是变量toastr在浏览器window.

中不可用

我尝试寻找类似的问题，但找不到任何问题。这是我第一次尝试学习 webpack。感谢任何帮助。

Answer 1

Webpack 不会公开您导入的模块，它将您的代码与所需的依赖项捆绑在一起，但它们仍然是模块化的并且有自己的范围。 Webpack 不会只是盲目地组合所有文件的来源，当然也不会把所有东西都全局化。如果你发布的条目文件是整个文件，那么你根本没有做任何事情。

而不是使用 webpack，您将在捆绑的 JavaScript 文件中完成工作。可以这么说，您 HTML 中包含的所有内容都是由 webpack 创建的包，您不包含其他试图访问包中内容的脚本，而是直接在包中执行此操作。

当然，您可以通过显式定义将其公开给 window：在导入 toastr 后 window.toastr = toastr，但污染全局范围通常不是一个好主意，这也没什么不同从仅在 <script> 标签中包含 toastr。如果 bundle 只是用作库，你可以看看 Authoring Libraries。但我认为你只是在做一个普通的网络应用程序，你应该把所有的代码放在一起，由 webpack 捆绑在一起，而不是在另一个 <script> 标签中依赖它。

您应该阅读官方文档的 Getting Started 指南。该示例非常小（创建一个 DOM 元素）但向您展示了 webpack 应用程序的概念并且还使用了外部依赖项。

Answer 2

简单的解决方案：

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

Webpack 和 toastr

Webpack and toastr

javascript

toastr

webpack

webpack-2