|
|
|
步骤 2 : a.js 步骤 3 : b.js 步骤 4 : webpack.config.json 步骤 5 : 修改 index.html 步骤 6 : 运行测试 步骤 7 : 可运行项目
有时候，会不止一个 js 文件，会有多个。 本知识点就是讲解这种情况下如何进行配置处理
修改 a.js 为如下代码
document.write("hello webpack from a.js<br>");
document.write("hello webpack from a.js<br>");
新增 b.js 为如下代码
document.write("hello webpack from b.js<br>");
document.write("hello webpack from b.js<br>");
修改配置文件为如下代码。 这回导致 a.js 被打包到 bundle1.js , b.js 被打包到 bundle2.js。
module.exports = {
entry: {
bundle1: './a.js',
bundle2: './b.js'
},
output: {
filename: '[name].js'
},
devServer: {
port:8088
}
}
module.exports = {
entry: {
bundle1: './a.js',
bundle2: './b.js'
},
output: {
filename: '[name].js'
},
devServer: {
port:8088
}
}
修改 index.html 为如下代码, 分别引用两个打包的文件。
<html>
<head>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</head>
</html>
<html>
<head>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</head>
</html>
运行测试
npm run dev
在右上角有本知识点对应的可运行项目下载 ,实在自己搞不出来，就下载解压出来比较一下。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-08-01
没显示 a.js 和 b.js 的解决办法
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-11-06
显示不了这两行字
2020-02-28
所以如何在两分钟内入睡？
2020-02-01
运行之后还是没办法显示a、b文件夹的内容
2019-03-24
无法实现预期
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||
