webpack中多文件打包配置的详细流程
更新时间：2023年11月20日 09:57:51 作者：周星星日记
这篇文章主要介绍了webpack中多文件打包配置的详细流程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1.module,chunk,bundle的区别
- moudle - 各个源码文件，webpack中一切皆是模块
- chunk - 多模块合并成的，如
entry,import(),splitChunk - bundle - 最终的输出文件
2.多文件打包配置
2.1 webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
module: {
rules: [
// ----- 同上文 ----
]
},
plugins: [
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
// chunks: ['index'] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
// chunks: ['other'] // 只引用 other.js
})
]
}上面的chunks配置，如果不配置chunks，那么打包出来的结果是默认引入全部js
<body>
<p>webpack demo</p>
<input type="text"/>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="other.js"></script>
</body>如果配置了chunks，那么就只引入对应的结果
<body>
<p>webpack demo</p>
<input type="text"/>
<script type="text/javascript" src="index.js"></script>
</body>2.2 webpack.prod.js
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')
module.exports = smart(webpackCommonConf, {
mode: 'production',
output: {
// filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
},
module: {
rules: [
//代码重复
]
},
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
new webpack.DefinePlugin({
// window.ENV = 'production'
ENV: JSON.stringify('production')
})
]
})多入口时，output出口的【name】变量会对应到入口的变量名
到此这篇关于webpack中多文件打包的文章就介绍到这了,更多相关webpack多文件打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细分析了Bootstrap部分源代码，先提供给大家学习，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JS中关于ES6 Module模块化的跨域报错,ES6模块化提供了export命令和import 命令，对于模块的导出和引入，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
最近由于公司项目需要，要利用Javascript实现图片懒加载效果，尝试起来发现并不难，于是将自己的实现过程分享出来给大家学习和参考，希望对有需要的朋友们带来一定的帮助，感兴趣的朋友们下面来一起看看吧。2016-10-10
初级开发人员往往很少使用js的抛出和捕获异常，但抛出和捕获异常往往是非常必要的,这篇文章主要给大家介绍了关于JavaScript基础入门之错误捕获机制的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果，通过设置定时器实现延时0.5s切换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
这篇文章主要介绍了微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要为大家介绍了如何通过JavaScript模拟实现新浪的下拉菜单效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试2022-03-03
在上一篇中，自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了2010-08-08
比较简单的一个符合web标准的JS调用flash方法...2007-11-11
JavaScript代表客户端，而Session代表的是服务器（不知道这样说大家是否能够理解）接下来介绍JavaScript如何控制Session，感兴趣的朋友可以了解下啊2013-01-01
最新评论