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多入口打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
javascript判断两个IP地址是否在同一个网段的实现思路
要判断两个IP地址是否在同一个网段,将它们的IP地址分别与子网掩码做与运算,得到的结果为网络号,具体实现如下,需要的朋友可以参考下2013-12-12基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
这篇文章主要介绍了基于jsbarcode 生成条形码并将生成的条码保存至本地,本文给大家提供最新源代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧2020-04-04一文详解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中,Map、Set、WeakMap和WeakSet是四个不同的数据结构,它们都有不同的特点和用途,本文详细介绍了Map、Set、WeakMap和WeakSet的用法及区别,需要的朋友可以参考下2023-04-04
最新评论