代码
这是我的 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功能将存在。






