javascript-如何在HtmlWebpackPlugin中使用Webpack中的多个条目以及多个HTML文件?
作者:互联网
我们希望从Webpack获得两个输出-整个应用程序具有所有依赖项,而另一个页面只有一个依赖项(主应用程序不共享).
似乎做到这一点的方法是利用Webpack配置的entry属性.但是,这还不够,因为我们还使用HtmlWebpackPlugin来输出带有Webpack编译动态添加的build.js(以及编译的LESS等)的HTML文件.根据HtmlWebpackPlugin docs:
If you have multiple Webpack entry points, they will all be included
with script tags in the generated HTML.
这对我们不起作用,因此我需要利用他们的filterChunks选项.这个GitHub issue response最简洁地说:
module.exports = {
entry: {
'page1': './apps/page1/scripts/main.js',
'page2': './apps/page2/src/main.js'
},
output: {
path: __dirname,
filename: "apps/[name]/build/bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
inject: false,
chunks: ['page1'],
filename: 'apps/page1/build/index.html'
}),
new HtmlWebpackPlugin({
inject: false,
chunks: ['page2'],
filename: 'apps/page2/build/index.html'
})
]
};
(在HtmlWebpackPlugin文档中,这在“过滤块”部分下)
因此,我这样修改了代码:
module.exports = {
entry: {
app: './public/js/ide.js',
resetPassword: './public/js/reset_password.js'
},
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js',
publicPath: '/'
},
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/html/ide.html',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'reset_password.html',
template: 'public/html/reset_password.html',
inject: true,
chunks: ['resetPassword']
}),
],
}
现在,当我重建项目(现在仅尝试使用WebpackDevServer)并导航到/index.html时,我可以在网络选项卡中看到大量的捆绑文件,即index.html的内容(基于ide.html模板) ,以及对各种外部资源的要求.但是,不会运行任何实际的JavaScript(例如,ide.js中的console.log).显示文件中的所有HTML.
对于reset_password.html,将显示所有HTML,并且将显示reset_password.js文件,但运行中没有Java脚本.
如何确保输入文件中的JavaScript运行?
编辑:我已经使ide.js工作,因为我还没有意识到以下内容是“块”:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
因此,我将供应商添加到index.html HtmlWebpackPlugin块属性.现在,它看起来像这样:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/html/ide.html',
inject: true,
chunks: ['app', 'vendor']
}),
reset_password在node_modules文件夹中不需要任何内容,这也不能解释为什么ide.js内根本不运行JavaScript,所以我仍然很困惑.另外,reset_password仍然不起作用.
EDIT2:加载reset_password.html时,通过看似明显附加的reset_password.js文件,可以看到此行
eval("\n\nconsole.log('DRAGONHELLO');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvanMvcmVzZXRfcGFzc3dvcmQuanM/ZjY5ZSJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiOztBQUNBQSxRQUFRQyxHQUFSLENBQVksYUFBWiIsImZpbGUiOiIuL3B1YmxpYy9qcy9yZXNldF9wYXNzd29yZC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuY29uc29sZS5sb2coJ0RSQUdPTkhFTExPJylcbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./public/js/reset_password.js\n");
因此,很明显,我的console.log(‘DRAGONHELLO’)是“看到的”,但是我不知道为什么它没有运行.
EDIT3:将供应商添加到reset_password.html的块中会导致JavaScript运行,但是我不知道为什么,这是不理想的,因为练习的重点是有两个不同的捆绑包,一个捆绑包非常小,并且没有不需要我们所有的node_modules.
EDIT4:我使用profile:true运行了Webpack,可以看到我没有弄错“块名称”:
js/app.3d18b43294ebd54ed083.js 1.34 MiB 0 [emitted] [big] app
js/resetPassword.198485be2b163cc258ed.js 1.02 KiB 1 [emitted] resetPassword
js/2.e7f92193ea3c611a0b36.js 2.23 MiB 2 [emitted] [big] vendor
js/app.3d18b43294ebd54ed083.js.map 2.71 MiB 0 [emitted] app
js/resetPassword.198485be2b163cc258ed.js.map 4.57 KiB 1 [emitted] resetPassword
js/2.e7f92193ea3c611a0b36.js.map 7.12 MiB 2 [emitted] vendor
EDIT5:我都尝试过
module.exports = {
//...
optimization: {
runtimeChunk: {
name: entrypoint => `runtime~${entrypoint.name}`
}
}
};
和
module.exports = {
//...
optimization: {
runtimeChunk: true
}
};
基于PlayMa256的注释和webpack docs on runtimeChunk.两者均未导致JavaScript执行.
解决方法:
设置时:
module.exports = {
//...
optimization: {
runtimeChunk: true
}
};
它生成一个运行时块.什么是运行时?运行时是webpack用来加载其他文件的所有代码所在的位置.这是运行构建时webpack的核心.
由于您有2个单独的捆绑包文件:resetPassword和app.
好的,您已拥有所需的所有文件.您可能同时也需要供应商,因为您的供应商包含了node_modules中的所有内容.因此,基本上您将拥有:
html 1:应用,供应商,runtimeChunk.
html 2:reset_password,供应商,runtimeChunk.
这样,您的应用程序应运行.
标签:html-webpack-plugin,javascript,webpack 来源: https://codeday.me/bug/20191014/1911587.html