IT虾米网

reactjs之webpackJsonp 未定义

freeliver54 2026年04月16日 程序员 115 0

代码

这是我的 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> 

请您参考如下方法:

实际上,这只是因为您的脚本顺序,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功能将存在。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!