html一个条目下多个,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