how2j.cn

下载区
文件名 文件大小
webpack-demo.rar 1k
使用站长秘制下载工具
步骤 1 : 多个入口文件   
步骤 2 : a.js   
步骤 3 : b.js   
步骤 4 : webpack.config.json   
步骤 5 : 修改 index.html   
步骤 6 : 运行测试   
步骤 7 : 可运行项目   

步骤 1 :

多个入口文件

edit edit
有时候,会不止一个 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>");
步骤 4 :

webpack.config.json

edit edit
修改配置文件为如下代码。 这回导致 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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-webpack-多个入口文件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 982790551
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图