Question

码

这是我的webpack.babel.js

条目部分：

entry: {
   vendor: [
       "react",
       "react-dom"
    ]
}

// 自动获取路径(主动获取写的逻辑代码)
let files = glob.sync('./src/**/index.js'),
    newEntries = files.reduce(function (memo , file) {
        let name = /.*\/(.*?)\/index\.js/.exec(file)[1];

        memo[name] = entry(name);

        return memo;
    }, {});

config.entry = Object.assign({} , config.entry , newEntries);

function entry(name) {
    return './src/js/' + name + '/index.js';
}

输出部分：

output: {
    path: path.join(__dirname,"/dist/js/"),
    filename: "[name].js"
},

模块部分：

 module: {

        // 将非js的资源 或者 非es5 资源 转化为合适的 js 资源 
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: [
                    'es2015',
                    'stage-0',
                    'react'
                ]
            } 
        }]
    },

    // 第三方库合并
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor' , 'vendor.bundle.js')
    ]
}

我在我的React代码（home.js）中使用webpack加载

问题

我想加载我的脚本但是遇到一些ReferenceError。

未捕获的ReferenceError：未定义webpackJsonp

我正在home.js

之前加载vendor.bundle.js包文件

<script src="../../dist/js/vendor.bundle.js"></script>
<script src="../../dist/js/home.js"></script>

Answer 1

尝试将<solver>添加到模块部分：

Infinity

Answer 2

因此错误消息实际上是在说您忘记了该其他脚本标签，还记得bundle.js吗？那么您需要对vendor.js做同样的事情。

因此，我们现在有这些单独的javascript文件，我们可能需要做一些更多的代码拆分，但是我们需要在此index.html文件中确保所生成的每个脚本文件都有一个脚本文件。我们甚至可能会争辩说，您在index.html文件中确实包含的脚本标记混乱或格式不正确，等等。

我不认识您，但是脚本的数量可能会有所不同，我不想手动更改index.html文件来适应这种情况并解决您遇到的所有麻烦现在。

我不想记住，每次更改webpack文件时，我们还必须转到index.html并添加其他脚本标签。

为解决此问题，我们将在名为webpack.config.js的{{1}}文件中添加一个插件。

该插件的目的是取代或不再需要手动维护此html文档中的脚本标签。

因此我们的webpack流程将运行，它将吐出一些脚本，并且插件将自动为我们生成一个HTML文档，其中包含正确的脚本。

您可以像这样安装插件：

HtmlWebpackPlugin

在npm install —save-dev html-webpack-plugin文件中，您将需要在该模块中像这样：

webpack.config.js

您将在底部将其添加到插件部分，如下所示：

var HtmlWebpackPlugin = require(‘html-webpack-plugin’);

注意我的plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new HtmlWebpackPlugin({ }) ] };与您的外观有何不同？进行我的设置。

现在，您需要向此东西传递一些配置。

首先，传递对HTML模板的引用，以供Web Pack使用。因此CommonsChunkPlugin会自动为您生成此html，其中带有一些脚本标签，但是当您不为其提供模板时，它将在没有模板的情况下尽其所能，因为它不知道该做什么。设置在您的html文档中，它不会知道您可能要使用的任何自定义设置。为了确保插件将自定义考虑在内，您必须告诉以下内容：

npm run build

因此，此设置要求您现在将plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new HtmlWebpackPlugin({ template: 'src/index.html' }) ]从根目录移动到index.html文件夹中，这样做的理由是因为我们现在将其视为模板。

找到您的脚本标签并删除现有的脚本标签。为什么？此插件的目的是说，对于webpack生成的每个javascript文档，它都会自动为我们在此html文档中添加脚本标签，因此我们不必自己手动进行操作。

因此，现在当您运行webpack时，插件将运行。该插件将使用src/模板，并在其中为您添加的每个javascript文件手动添加一个脚本标签，然后它将一个新的html文档输出到您的index.html目录中。

dist/

现在，您应该在npm run build目录中有一个index.html文档，如果您在其中查看，则在div标签下面，您会注意到有两个附加的脚本标签已注入到您的目录中文档。

您会注意到您同时拥有dist/和vendor.js的脚本标签引用。

因此，当您开始在Webpack中添加更多入口点，进行更多代码拆分或进行更多操作时，html插件将自动为您注入html文档中。

通过在终端中打开应用程序并使用以下命令手动进行测试：手动打开bundle.js目录并确保一切正常：

dist/

您的浏览器应该打开，您应该在open dist/index.html目录中，它将捕获html文档，瞧，您的应用程序可以正常工作并在屏幕上显示了，如果您打开Elements标签，您仍然在那里有dist/和vendor.js，您不必对脚本标签做任何手动操作。

为什么这样做？

除了获得bundle.js的麻烦之外，您还可以这样做，因为随着时间的流逝，您可能会更改脚本标签的数量，甚至更改webpack输出的脚本标签的名称。

通过使用此插件，会将所有脚本添加到您的ReferenceError: webpackJsonp is not defined文档中。

这就是您的应用程序又迈出了一步。一切顺利。

Answer 3

实际上，这只是由于您的脚本顺序而发生，webpackJsonp是vendor.js文件中存在的一个函数。因此vendor.js文件应在home.js块之前下载并运行。

您应该像下面那样编写模板：

<script src="../../dist/js/vendor.bundle.js" defer></script>
<script src="../../dist/js/home.js" defer></script>

所有defer的{{1}}标志原因将下载。那么第一个文件将运行，而在第二个文件的运行中，HTML函数将存在。

webpackJsonp未定义

码

问题

3 个答案: