我的编程空间,编程开发者的网络收藏夹
学习永远不晚

webpack中怎么配置文件入口和文件出口

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

webpack中怎么配置文件入口和文件出口

今天小编给大家分享一下webpack中怎么配置文件入口和文件出口的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  1、建立一个js为webpack.config.js文件,该文件是Webpack的配置文件

  webpack.config.js

  module.exports={

  entry:{},//入口文件的配置项

  output:{},//出口文件的配置项

  module:{},//模块:例如解读CSS,图片如何转换,压缩

  plugins:[],//插件,用于生产模版和各项功能

  devServer:{}//配置webpack开发服务功能}

  entry:配置入口文件的地址,可以是单一入口,也可以是多入口。

  output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。

  module:配置模块,主要是解析CSS和图片转换压缩等功能。

  plugins:配置插件,根据你的需要配置不同功能的插件。

  devServer:配置开发服务功能,后期我们会详细讲解。

  entry选项(入口配置)

  wepback.config.js中的entry选项

  //入口文件的配置项

  entry:{

  //里面的entery是可以随便写的

  entry:'./class="lazy" data-src/entry.js'},

  output选项(出口配置)

  //出口文件的配置项output:{

  //打包的路径名称

  path:path.resolve(__dirname,'dist'),//打包的文件名称

  filename:'bundle.js'},

  path.resolve(__dirname,’dist’)//就是获取了项目的绝对路径。

  filename:是打包后的文件名称,这里我们起名为bundle.js。

  只这样写,是会报错的:找不到path这个东西。所以我们要在webpack.config.js的头部引入path

  constpath=require(‘path’);

  现在webpack.config.js的代码:

  constpath=require('path');

  module.exports={

  //入口文件的配置项entry:{

  entry:'./class="lazy" data-src/entry.js'},

  //出口文件的配置项output:{

  //输出的路径,用了Node语法

  path:path.resolve(__dirname,'dist'),

  //输出的文件名称filename:'bundle.js'},

  //模块:例如解读CSS,图片如何转换,压缩module:{},

  //插件,用于生产模版和各项功能plugins:[],

  //配置webpack开发服务功能devServer:{}}

  最后在终端中输入webpack进行打包

  多入口、多出口配置:

  constpath=require('path')//path是一个常量不能更改,path需要引入varwebpack=require('webpack')

  module.exports={//bundle入口

  entry:{

  entry:'./class="lazy" data-src/entry.js',//下面的entry是随便起的名字

  entry2:'./class="lazy" data-src/entry2.js'//有两个入口也要有两个出口

  },//bundle输出

  output:{

  path:path.resolve(__dirname,'dist'),//绝对路径

  filename:'[name].js'//可重命名当有多个入口文件时,出口文件用name,说明打包的出口文件和入口文件名相同

  },

  module:{},

  plugins:[],

  devServer:{}

  }

  注意:修改了两个地方:入口和出口修改

  [name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。

以上就是“webpack中怎么配置文件入口和文件出口”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

webpack中怎么配置文件入口和文件出口

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何正确地配置入口文件?

第三方库作者就需要编写相应的入口文件,来达到“动态”引入的目的,同时也方便于打包工具对于无用代码的剔除,减少代码体积,本篇文章主要聚焦于前端工程如何正确地配置入口文件。

thinkPHP5中怎么隐藏入口文件

本文小编为大家详细介绍“thinkPHP5中怎么隐藏入口文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“thinkPHP5中怎么隐藏入口文件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、环境准备在进行UR
2023-07-06

怎么在python中利用Package设置文件入口

本篇文章给大家分享的是有关怎么在python中利用Package设置文件入口,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Python主要用来做什么Python主要应用于:1、
2023-06-14

php怎么隐藏入口文件

这篇文章将为大家详细讲解有关php怎么隐藏入口文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。php隐藏入口文件的方法:首先开启apache重写模块;然后在项目根目录与入口文件同级的目录重写分布式配置文
2023-06-14

python怎么写入文件和输出文件

在Python中,可以使用`open()`函数来打开文件,并且可以指定打开文件的模式(读取、写入等)。以下是写入文件和输出文件的示例代码:**写入文件**```pythonfile = open("example.txt", "w") #
2023-09-29

云服务器配置端口转发怎么设置出来的文件

端口转发是云服务器中常用的功能之一,可以将一个应用程序或服务的请求发送到云服务器中的多个服务器上,以实现负载均衡和高可用性。下面我们将详细介绍如何配置端口转发以实现云服务器之间的互联互通。首先,我们需要在云服务器中安装Python和Tomcat等服务器端Python库。这些库可以通过命令行进行安装,例如:pythonimporttomcat接下来,我们需要在云服务器中配置端口转发。可以通过以下命令来实现:```pythonimportrequestsur...
2023-10-27

怎么正确设置Python项目的入口文件

本篇内容介绍了“怎么正确设置Python项目的入口文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!有一位同学提到了 Python 找不到模
2023-06-15

vue怎么生成一个配置文件修改接口

这篇文章主要介绍了vue怎么生成一个配置文件修改接口的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么生成一个配置文件修改接口文章都会有所收获,下面我们一起来看看吧。教程:第一步:安装generate-a
2023-07-04

plsql命令窗口怎么导入sql文件

要在PL/SQL命令窗口中导入SQL文件,可以按照以下步骤进行操作:1. 打开PL/SQL命令窗口。2. 在命令窗口中输入以下命令,以连接到目标数据库:```CONNECT username/password@database```请将"u
2023-10-11

Python的ini配置文件怎么写入

本文小编为大家详细介绍“Python的ini配置文件怎么写入”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python的ini配置文件怎么写入”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。INI介绍INI是英文
2023-06-29

怎么使用log4j2自定义配置文件位置和文件名

本篇内容主要讲解“怎么使用log4j2自定义配置文件位置和文件名”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用log4j2自定义配置文件位置和文件名”吧!log4j2自定义配置文件位置和
2023-06-22

Qt怎么读取和写入配置文件的数据

本篇内容主要讲解“Qt怎么读取和写入配置文件的数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Qt怎么读取和写入配置文件的数据”吧!前言在Qt中如何读取配置文件(.ini)中的数据呢?又是如何
2023-07-05

Python中怎么解析配置文件

这篇文章将为大家详细讲解有关Python中怎么解析配置文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在程序中使用配置文件来灵活的配置一些参数是一件很常见的事情,配置文件的解析并不复杂,在
2023-06-17

Hibernate中怎么加载配置文件

本篇文章给大家分享的是有关Hibernate中怎么加载配置文件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在向大家详细介绍Hibernate加载配置文件之前,首先让大家了解下
2023-06-17

编程热搜

目录