桃花开了
2017-03-15 11:22
var htmlWebpackPlugin = require('html-webpack-plugin'); //commom.js的模块化输出 module.exports={ entry:{ main:'./src/script/main.js', a: './src/script/a.js', b: './src/script/b.js', c: './src/script/c.js' },//入口文件 output:{ path:'./dist', filename:'js/[name]-[chunkhash].js', // publicPath:"http://cdn.com/" }, plugins:[ new htmlWebpackPlugin({ filename:'a.html', template:'index.html', title:"webapck is a", inject:'body', chunks:['main','a'] }), new htmlWebpackPlugin({ filename:'b.html', template:'index.html', title:"webapck is b", inject:'body', chunks:['b'] }), new htmlWebpackPlugin({ filename:'c.html', template:'index.html', title:"webapck is c", inject:'body', chunks:['c'] }) ] };
除了a页面可以生成,b.html和c.html都有错误
Html Webpack Plugin: <pre> TypeError: Cannot read property 'entry' of undefined - index.html:17237 D:/dwf/study/webpacklearn/index.html:17237:42 - index.html:17240 module.exports D:/dwf/study/webpacklearn/index.html:17240:3 - index.js:265 [webpacklearn]/[html-webpack-plugin]/index.js:265:16 - util.js:16 tryCatcher [webpacklearn]/[bluebird]/js/release/util.js:16:23 - promise.js:512 Promise._settlePromiseFromHandler [webpacklearn]/[bluebird]/js/release/promise.js:512:31 - promise.js:569 Promise._settlePromise [webpacklearn]/[bluebird]/js/release/promise.js:569:18 - promise.js:606 Promise._settlePromiseCtx [webpacklearn]/[bluebird]/js/release/promise.js:606:10 - async.js:138 Async._drainQueue [webpacklearn]/[bluebird]/js/release/async.js:138:12 - async.js:143 Async._drainQueues [webpacklearn]/[bluebird]/js/release/async.js:143:10 - async.js:17 Immediate.Async.drainQueues [webpacklearn]/[bluebird]/js/release/async.js:17:14 </pre>
是不是你的 index.html 文件里用 script 引用了 js?如果是,注释或删除后重新运行应该就好了~
必须删掉模板中script标签引入,注释都不好使
webpack模板中的注释也被视为模块,他需要保证注释的准确性,所以,如果在注释中引入的chunks中没有响应的内容,就会报错。
我的a.html是ok的,但是b,c都是不行,就是如此。
有可能是你配置文件里写了excludeChunks['main'],而你在html中写的是 compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() 这样也会报错,与excludeChunks 冲突
确实 注释了script之后运行不成功 删掉script才可以
chunks:['main','b'] 必须引入main,我是因为b和c都没引入才报错的
你需要在b和c里也chunks:['b','main'] chunks:['c','main']
老师用的是excludeChunks,我用的是chunks,报错后的解决方法:在webpack.config.js中chunks:["b","main"]和chunks:["c","main"]都加上“main”就好了。得出的结论,模板html文件中如果有固定引入某个打包后的js文件,那么相应的调用模板文件的配置中就要在chunks中加入固定的js文件在entry中对应的key。如:
<%=
/*这里就引入了固定的main对应的打包后的js文件*/ compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
%>
那么webpack.config.js中chunks:["b","main"],就要写"main",不然就报错误:
Cannot read property 'entry' of undefined
也有同样的疑问
好吧,虽然删除template中的script确实可以解决问题,但是如果确实需要在template中插入script标签呢,到底怎么破?望有人能解答一下这个问题
<script type="text/javascript">
<%=
compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
%>
</script>
在head中插入这段代码也不会生成b.html和c.html怎么办
确实需要删除才可以
遇到同样的问题!如果 index.html引用了js,需要删除,注释掉没有用。
inject:'body'改成inject:false,不要自动向index.html中插入js,然后在b和c页面的的插件配置中,chunks要引入'main',因为你的index.html有个直接引用的js,调用了 main.entry。然后加上excludeChunks:['a','c']和excludeChunks:['a','b'],排除掉不需要的chunk,就OK了
webpack深入与实战
86561 学习 · 721 问题
相似问题