reactjs - webpackJsonp 未定义

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。

Uncaught ReferenceError: webpackJsonp is not defined

我在 home.js 之前加载 vendor.bundle.js 包文件

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

Answer 1

实际上，这只是因为您的脚本顺序，webpackJsonp s 存在于 vendor.js 中的函数文件。所以vendor.js文件应在 home.js 之前下载并运行 block 。

你应该像下面这样编写你的模板:

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

defer向所有人标记原因 HTML将下载。然后第一个文件将运行并在第二个文件的运行中， webpakcJsonp功能将存在。