webpack4 高手之路第三天

╰+攻爆jí腚メ 2022-03-07 14:40 224阅读 0赞

## webpack4 多入口多出口 ##

*  初始化webpack项目，搭建基础目录  
    ![图片描述][2590677434-5c735dab86514_articlex]
 *  配置webpack.config.js配置文件
    
        const path = require("path");
        module.exports = {  //引入nodejs中的path模块
            entry: {
                main: "./src/script/main.js"， //可配置多个入口文件
                demo: "./src/script/demo.js"
            },
            output: {
                path: path.join(__dirname,"dist","test"), //解决行命令的目录和webpack.config.js不在同一个目录时造成的容错率问题，用绝对路径同样有效
                filename: "[name].bundle.js"  //[name]对应你入口文件的name，也就是属性名
            }
        }
 *  配置package.json
    
        {
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
                "dev": "webpack --mode development",
                "buil": "webpack --mode production"
          },
          "keywords": [],
          "author": "",
          "license": "ISC"
        }
 *  npm run dev 以开发模式运行打包  
    ![图片描述][3768124196-5c735ebb1af3c_articlex]
 *  成功打包后查看输出文件，会发现生成了两个我们配置需要输出的js文件  
    ![图片描述][2859114057-5c735f16dbfc4_articlex]

这样，多出口打包多个js文件就完成了！

[2590677434-5c735dab86514_articlex]: /images/20220307/4c2d4845ddd04f2b847f5eef9d93cb2e.png
[3768124196-5c735ebb1af3c_articlex]: /images/20220307/ddf88cbef9b249b7940a1716f40d2524.png
[2859114057-5c735f16dbfc4_articlex]: /images/20220307/010daf0a54fb42da8f265a4bd6d38b61.png

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 shell高手之路（一）

![在这里插入图片描述][20201129174751908.jpg] shell编程基础简介 shell脚本通常是一个以shebang1起始的文本文件，如下所

港控/mmm°/ 2022年12月24日 15:53/ 0 赞/ 148 阅读

相关向天草学习之路（三）

不脱壳破解方法1： OEP。这里就不废话了。方法2： 1，用OD 载入程序，运行程序； ![Center][] 2，按 Alt + C 或者选择菜单

绝地灬酷狼/ 2022年08月08日 06:22/ 0 赞/ 22 阅读

相关实习第4天

今天是无感的一天，本以为只是已经完成了Jenkins的搭建阶段，谁知道突然间自己的任务又多了起来，要完成引擎在所有平台的自动化编译，这是一个很海量的工作，要写大量的脚本

短命女/ 2022年06月10日 13:13/ 0 赞/ 213 阅读

相关 zookeeper第三天：

下载下载zookeeper地址：[https://www.apache.org/dyn/closer.cgi/zookeeper/ ][https_www.apac

Love The Way You Lie/ 2022年06月02日 06:05/ 0 赞/ 228 阅读

相关 webpack学习之路

最新更新时间：2018年8月20日16:57:18 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：webpack 1 相关

今天药忘吃喽~/ 2022年05月16日 07:45/ 0 赞/ 283 阅读

相关前端学习之CSS第三天

Css基础复习昨天知识 1、Css书写位置 ◆内嵌

╰半橙微兮°/ 2022年05月10日 07:48/ 0 赞/ 264 阅读

相关前端学习之JavaScript第三天

Javascript基础一、Switch语句 Switch(变量){

深藏阁楼爱情的钟/ 2022年05月08日 00:04/ 0 赞/ 548 阅读

相关 QT第三天

字符串与输入输出字符串与数值之间的转换 void Widget::on_btnCal_clicked() { QString st

谁践踏了优雅/ 2022年04月13日 13:23/ 0 赞/ 348 阅读

相关 QT第三天

1.QPerson类的定义 ifndef QPERSON_H define QPERSON_H include<QObject>//加入<QObj

小咪咪/ 2022年04月13日 07:43/ 0 赞/ 321 阅读

相关 webpack4 高手之路第三天

webpack4 多入口多出口初始化webpack项目，搭建基础目录 ![图片描述][2590677434-5c735dab86514_article

╰+攻爆jí腚メ/ 2022年03月07日 14:40/ 0 赞/ 225 阅读