webpack多入口打包示例代码
更新时间:2023年12月27日 10:20:39 作者:海上彼尚
这篇文章主要介绍了webpack多入口打包的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
webpack多入口打包
首先得确定用webpack构建的应用,再然后后就是确定目录。

这两个js文件分别对应两个html文件,在 html中需要分别引入对应的js文件。处理html中引入的问题可以使用 html-webpack-plugin 这个插件。
配置:
module.exports = {
entry: {
index: path.resolve(__dirname, "./src/index.js"),
map: path.resolve(__dirname, "./src/map.js"),
},
plugins: {
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.html"),
filename: "index.html",
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/map.html"),
filename: "map.html",
}),
}
}webpack:打包示例-打包多入口
入口
entry: {
// 前台
index: './public/assets/js/index', //打包入口项
list: './public/assets/js/list',
search: './public/assets/js/search',
detail: './public/assets/js/detail',
jquery: './public/assets/vendors/jquery/jquery.min.js',
// 后台
},出口
output: {
path: path.join(__dirname, './dist'),
filename: '[name].bundle.js', //多入口写法--打包出同名文件
},对应的插件
plugins: [
//后台
//前台
new Webpack.ProvidePlugin({
$: 'jquery' //全局暴露的第三方库 .不写内置模块的话,报$ is not defined
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './public/index.html'),
chunks: ['index'] //多入口写法--按需导入
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: path.join(__dirname, './public/list.html'),
chunks: ['list']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: path.join(__dirname, './public/search.html'),
chunks: ['search']
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: path.join(__dirname, './public/detail.html'),
chunks: ['detail']
})
],完整截图


到此这篇关于webpack多入口打包的文章就介绍到这了,更多相关webpack多入口打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
TypeScript前端高频面试题总结大全(2026最新版)
TypeScript作为JavaScript的超集,已经成为前端开发中不可或缺的技术,这篇文章主要介绍了TypeScript前端高频面试题总结大全的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-05-05
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
这篇文章主要介绍了JS/HTML5游戏常用算法之碰撞检测 像素检测算法,结合实例形式详细分析了javascript像素检测碰撞算法的原理、实现步骤及相关操作技巧,需要的朋友可以参考下2018-12-12
Javascript获取与设置ckeditor数据的实现方法
最近编辑器后台升级成了ckeditor,但原来后台有很多对应编辑器内容的替换功能,那么就需要用js获取ckeditor编辑器里面的内容,这里就为大家介绍一下具体的实现方法2023-08-08
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
这篇文章主要介绍了微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07


最新评论