webpack 入口(entry)和输入管理(output)
时间:2019-11-27
本文章向大家介绍webpack 入口(entry)和输入管理(output),主要包括webpack 入口(entry)和输入管理(output)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在开始上代码之前,先让我们盘一盘什么是webpack中的入口和输入
入口
假设你现在手里有一个水龙头,然后十个人用水管从你这里拿水。你这个龙头就是水的入口,水管就是你和这些人的依赖联系。现在供水局的要来查有多少个人在用你的水,只要顺这水管去查,就ok了。
webpack中的入口文件就是类似与这样的效果,是一个确定直接依赖和间接依赖文件,然后才好将他们统统打包,要不然你在某个地方使用的jquery,而又没有打包对应的依赖库,又怎么能使用呢
输入
webpack 把东西打包之后,放在那里,要不要分类。输出就是webpack放置东西的地方
号概念清楚了上代码
const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题 module.exports = { mode: 'development',//配置 //入口配置接收三种类型的参数,string array object,以下分别对每一种进行示范操作 // entry: path.join(__dirname, 'src/index.js'),//使用string 单入口文件可以这样直接定义入口文件地址 // entry: [//使用array // './src/index.js',//也可以直接使用相对地址,只要你能够确保最终的结果能够和你预期的一样就够了 不过使用这种方法创建的多入口,打包后只会输出一个main.js文件, // // 为什么?两个原因 1没有配置output 指定输出的文件名 2即便配置了,但使用[]建立多入口的方式也会是webpack无法识别入口文件的标识,也就无法动态生成输入文件名,只能打包成一个main.js // './src/index2.js' // ], // entry: {//使用对象 推荐使用这种方法去作为创建多入口的参数, // index: path.join(__dirname, 'src/index.js'),//输入文件会默认自动根据这个对象的key值创建输出文件名 这个会创建一个app.js的输出文件 // index2:path.join(__dirname,'src/index2.js'), // }, entry: () => {//使用方法 其实这个上述几种创建方式没有任何实质上的区别,只要在函数内返回对应的值即可,不过有一点好处就是,这个是动态的 function join(src) { return path.join(__dirname, 'src/' + src); } return { app: join('index.js'),//可以少敲几个代码 app2: join('index2.js'), } }, //还可以使用promise对象 // entry: () => new Promise((success) => success({ // app: path.join(__dirname, 'src/index.js'), // app2: path.join(__dirname, 'src/index2.js'), // })), output: {//输入文件配置 path: __dirname + '/build',//指定输出文件 的地址 // filename: './js/index.js',//指定输入文件名 这个表示在输出目录build/js/index.js文件,如果存在多个入口就不能写死了否则webpack会提示两个输出文件拥有相同的名字错误, // 可以不指定或是由下面的方法, // 请注意 在入口文件使用的字符串或者数组作为参数,则输入的文件只会有一个 // filename: "./js/[hash].js",//以入口文件的哈希值来命名 filename:"./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用,其实还有更多别名的使用详情请去webpack官网查询 } }
原文地址:https://www.cnblogs.com/wrhbk/p/11942954.html
- TCP/IP(八)之总结TCP/IP四层模型
- 在Orchard中使用Image Gallery模块
- CentOS7设置IP地址
- 服务器端Javascript
- ASP连接数据库
- 彻底隐藏你HTML网页的源代码
- java学习:JMM(java memory model)、volatile、synchronized、AtomicXXX理解
- 使用CSS制作文字环绕图片效果(文字内容包含<li>标签)
- ClojureScript魔法堂:搭建开发环境
- PHP error_reporting() 错误控制函数功能详解
- centos上安装elasticsearch 5.5.1 遇到的各种坑
- 概率论08 随机变量的函数
- @Transactional导致AbstractRoutingDataSource动态数据源无法切换的解决办法
- 防F12扒代码:按下F12关闭当前页面
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现微信提现(企业付款到零钱)
- centos7下rsync+crontab定期同步备份
- php抽象类和接口知识点整理总结
- php中echo与print区别点整理
- laravel框架模型和数据库基础操作实例详解
- Yii Framework框架使用PHPExcel组件的方法示例
- thinkphp3.2.3框架动态切换多数据库的方法分析
- 安装docker和docker-compose实例详解
- 如何判断php复选框是否被选中
- php实现的生成排列算法示例
- php多进程应用场景实例详解
- Linux Crontab Shell脚本实现秒级定时任务的办法
- laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
- yii框架使用分页的方法分析
- Linux服务器间文件实时同步的实现