webpack五大核心概念,webpack知识点

　　在所有资产都收集到一起之后，您还需要告诉webpack将应用程序打包到哪里。webpack的输出属性描述了如何处理捆绑代码。下面这篇文章将带你深入了解webpack核心概念中的输出。希望对你有帮助！

　　输出：配置输出选项来控制webpack如何将编译后的文件写入硬盘。请注意，尽管可以有多个入口起点，但是只指定了一个输出配置。

起步

　　我们首先用npm init初始化一个项目，在本地安装webpack和webpack-cli，然后在根目录下创建index.html、webpack.config.js和src文件夹，在文件夹下再创建一个main.js作为入口文件。

　　准备完成后，如图所示：

　　main.js

　　函数组件(){

　　var div=document . createelement( div )

　　Div.innerHTML=我们一起来学习退出配置吧~

　　退货部门

　　}

　　document . body . appendchild(Component())index.html

　　身体

　　脚本src=。/dist/bundle.js/script

　　/bodypackag.json

　　脚本:{

　　测试:回显错误：未指定测试退出1 ，

　　Build:webpack //plus

　　}，然后是配置部分：webpack.config.js

输出（Output)）

　　配置输出选项以控制webpack将编译后的文件写入硬盘的方式。

　　请注意，尽管可以有多个入口起点，但是只指定了一个输出配置。

　　以下是输出配置的一些概念：

　　1、path

　　path指定资源输出的位置，要求值必须为绝对路径，如：

　　const path=require(path )

　　模块.导出={

　　条目：。/src/main.js ，

　　输出：{

　　文件名： bundle.js ，

　　//将资源输出位置设置为此项目的dist目录

　　path: path.resolve(__dirname， dist )

　　},

　　}在Webpack 4之后，output.path已经默认为dist目录。除非我们需要更改，否则不用单独配置，所以如果是webpack4以上，可以写成：

　　模块.导出={

　　条目：。/src/main.js ，

　　输出：{

　　文件名： bundle.js ，

　　},

　　}2、filename

　　filename的作用是控制输出资源的文件名，它的形式是字符串。这里我将其命名为bundle.js，这意味着我希望资源输出到一个名为bundle.js的文件中：

　　模块.导出={

　　条目：。/src/main.js ，

　　输出：{

　　文件名： bundle.js ，

　　},

　　}打包后，如图，会自动生成一个dist文件夹，里面有一个bundle.js文件。

　　filename可以不仅仅是bundle的名字，还可以是一个相对路径

　　路径中的目录不存在也没关系。Webpack将在导出资源时创建此目录，例如：

　　模块.导出={

　　输出：{

　　文件名：。/js/bundle.js ，

　　},

　　};包装后，如图所示：

　　在多入口的场景中，我们需要为每个生成的包指定一个不同的名称，Webpack支持使用一种类似模板语言的形式动态地生成文件名

　　在此之前，让我们在src中创建新的条目文件。

　　供应商网站：

　　函数组件(){

　　var div=document . createelement( div )

　　Div.innerHTML=我是第二个入口文件

　　退货部门

　　}

　　document . body . appendchild(Component())web pack . config . js:

　　模块.导出={

　　条目：{

　　主要：。/src/main.js ，

　　卖主：。/src/vender.js

　　},

　　输出：{

　　文件名：[名称]。js ，

　　},

　　};包装后，如图所示：

　　文件名中的[name]将被替换为块名，即main和vender。所以最后会生成vendor.js和main.js。

　　此时，如果您想要查看内容，您需要更改index.html中的内容，并将路径匹配到最后一个捆绑包。

　　身体

　　脚本src=。/dist/main.js/script

　　脚本src=。/dist/vender.js/script

　　/body3、其他

　　除了[name]可以引用块名之外，还有其他几个模板变量可以在文件名的配置中使用：

　　【hash】:指本次Webpack打包的所有资源生成的hash【chunk hash】；指当前区块内容的哈希[id];引用当前块的id[查询];指文件名配置项中的查询。它们可以是：控制客户端缓存

　　[hash]和[chunkhash]都与块内容直接相关。如果在filename中使用它们，当chunk内容发生变化时，可以同时引起资源文件名的变化，这样用户下次请求资源文件时就会立即下载新版本，而不需要使用本地缓存。

　　【查询】也可以有类似的效果，但是与组块内容无关，应该由开发者手动指定。

　　4、publicPath

　　PublicPath是一个非常重要的配置项，用来指定资源的请求位置

　　以加载图片为例。

　　从导入Img。/img . jpg ；

　　函数组件(){

　　//.

　　var img=new Image()；

　　Myyebo.src=Img //请求url

　　//.

　　} {

　　//.

　　查询：{

　　姓名：[姓名]。[ext]，

　　outputPath: static/img/，

　　公共路径：“”。/dist/static/img/

　　}

　　}如上例所示，原始图像请求地址为。/img.jpg，但是在配置中添加了publicPath之后，实际路径变成了。/dist/static/img/img.jpg，这样就可以从打包的资源中获取图片。

　　publicPath有3种形式：

　　HTML相关

　　我们可以将publicPath指定为HTML的相对路径，在请求这些资源时，我们会将相对路径添加到当前页面的HTML所在的路径中，形成实际请求的URL。

　　//假设当前的html地址是：https://www.example.com/app/index.html

　　//异步加载的资源命名为1.chunk.js

　　公共路径： //-https://www.example.com/app/1.chunk.js

　　pubilicPath:“”。/js /-https://www.example.com/app/js/1.chunk.js

　　公共路径：./assets//-https://www.example.com/assets/1.chunk.jshost相关

　　如果publicPath的值以“/”开头，则意味着publicPath基于当前页面的主机名。

　　//假设当前的html地址是：https://www.example.com/app/index.html

　　//异步加载的资源命名为1.chunk.js

　　公共路径：///-https://www.example.com/1.chunk.js

　　public path:“/js/”/-https://www.example.com/js/1.chunk.jscdn相关

　　以上两个是相对路径，我们也可以以绝对路径的形式配置publicPath。

　　这种情况一般发生在静态资源放在CDN上，因为其域名与当前页面的域名不一致，需要以绝对路径的形式指定。

　　当publicPath以协议头或相对协议的形式开始时，表示当前路径是CDN相关的。

　　//假设当前的html地址是：https://www.example.com/app/index.html

　　//异步加载的资源命名为1.chunk.js

　　public path: http://cdn . com///-http://cdn.com/1.chunk.js

　　public path: https://cdn . com///-https://cdn.com/1.chunk.js

　　public path://cdn . com/assets /////cdn . com/assets/1 . chunk . js

应用

　　1、单个入口

　　在webpack中配置output属性的最低要求是将其值设置为一个对象，包括以下两点：

　　文件名用于输出文件的文件名。输出目录路径module.exports={

　　条目：。/src/main.js ，

　　输出：{

　　文件名： bundle.js ，

　　},

　　}

　　//在Webpack 4之后会默认生成dist，所以这里省略了路径2、多个入口。

　　如果配置创建了多个单独的“区块”，应使用占位符来确保每个文件都有唯一的名称。

　　这里使用上面提到的文件名的[名称]。

　　另外，如果你想把这些资源放到指定的文件夹中，你可以添加路径配置。

　　模块.导出={

　　条目：{

　　主要：。/src/main.js ，

　　卖主：。/src/vender.js

　　},

　　输出：{

　　文件名：[名称]。js ，

　　Path: __dirname /dist/assets //指定打包的包放在/dist/assets目录中。

　　}

　　}

　　//打包后生成：/dist/assets/main.js，/dist/assets/vendor . js

HtmlWebpackPlugin

　　本章开头遗留下来的问题可以通过使用插件HtmlWebpackPlugin来解决。

　　安装插件

　　npm安装-保存-开发html-web pack-插件配置插件

　　conshtmlwebpackplugin=require( html-web pack-plugin )//加载模块

　　模块.导出={

　　条目：{

　　主要：。/src/main.js ，

　　卖主：。/src/vender.js

　　},

　　//添加插件

　　插件：[

　　新建HtmlWebpackPlugin({

　　标题：“输出管理”

　　})

　　],

　　输出：{

　　文件名：[名称]。js ，

　　},

　　};打包

　　打包后，您会在dist中找到一个新的index.html，它会自动帮助我们添加生成的资源。打开后，你会发现浏览器会显示内容。

　　这意味着当你将来初始化一个项目时，你不必写index.html。

　　有关编程的更多信息，请访问：编程视频！这就是webpack核心概念的输出细节。更多详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。