在前端开发中,我们经常需要配置多个入口,而每个入口都需要自动生成对应的 HTML 页面。Webpack4.0 提供了一种非常简单且灵活的方式来完成这个任务。
配置多个入口
首先,我们需要在 webpack.config.js 中配置多个入口。比如我们有两个入口:index.js 和 demo.js。
module.exports = { entry: { index: './src/index.js', demo: './src/demo.js' } }
自动生成对应的 HTML 页面
要自动生成对应的 HTML 页面,我们需要使用 html-webpack-plugin 插件。这个插件可以根据指定的模板生成 HTML 页面,并且将打包后的 JS 文件插入到 HTML 页面中。
首先,我们需要安装 html-webpack-plugin。
npm install html-webpack-plugin --save-dev
然后在 webpack.config.js 中引入并配置 html-webpack-plugin 插件。使用 new HtmlWebpackPlugin()
构造函数,我们可以实现自动生成对应的 HTML 页面。下面是一个示例代码:
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - ------ - ------ ----------------- ----- --------------- -- -------- - --- ------------------- --------- ------------------- --------- ------------- ------- --------- --- --- ------------------- --------- ------------------ --------- ------------ ------- -------- -- - -
这里我们使用了两个 HtmlWebpackPlugin
实例,分别对应 index.js 和 demo.js 对应的 HTML 页面。设置了 template
属性指定了模板文件,filename
属性指定了生成的 HTML 文件名,chunks
属性指定该 HTML 文件需要引入哪些打包后的 JS 文件。
总结
在 Webpack4.0 中,配置多个入口自动生成对应的 HTML 页面十分容易。我们只需要使用 html-webpack-plugin 插件,并编写配置,即可自动生成 HTML 页面。
示例代码:
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- -------------- - - ------ - ------ ----------------- ----- --------------- -- -------- - --- ------------------- --------- ------------------- --------- ------------- ------- --------- --- --- ------------------- --------- ------------------ --------- ------------ ------- -------- -- - -
以上是一个实用的技巧,可以使你在前端开发时更加高效和方便。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b6e04eadd4f0e0fff7e581