webpack的基本配置,webpack配置项有哪些
在所有过程的开始，我们需要指定一个或多个条目，也就是说，告诉Webpack从源目录中的哪个文件开始打包。下面这篇文章将带你深入了解webpack核心概念中的词条。希望对你有帮助！
如果把项目中每个模块的依赖看作一棵树，那么条目就是依赖树的根。
这些具有依赖关系的模块在打包时将被打包成一个块。那chunk是什么呢？
Chunk字面意思是代码块，可以理解为已经在Webpack中抽象打包的一些模块。就像一个信封，里面装了很多文件，里面的文件都是模块。Webpack在外面加了一层包，这样就形成了一个组块：
根据具体的配置，打包项目时可能会生成一个或多个块。
一个项目中可以定义多个门户，每个门户都会产生一个结果资源。
比如我们项目中有两个入口src/index.js和src/lib.js，一般会打包生成dist/index.js和dist/lib.js。
在一些特殊情况下，一个门户也可能生成多个块并最终生成多个束。
入口(entry)
参数：Entry
entry 是配置模块的入口，可以抽象为输入。Webpack执行和构造的第一步将是从入口开始搜索，递归解析入口依赖的所有模块。需要输入配置，如果未填写，Webpack将报告错误并退出模块。exports={
条目：。/src/index.js ，//表示入口文件，即从index.js进入我们的项目。
};Entry 类型
例子意思是字符串。/app/entry 入口模块的文件路径可以是相对路径数组[的文件路径。/app/entry1“，”。/app/entry2]，或相对路径对象{a:。/app/entry-a ，b: [。/app/entry。/app/entry-B2]}配置多个条目，每个条目生成一个Chunk。如果是数组类型，则在与output.library配置项目一起使用时，仅导出数组中最后一个条目文件的模块。
Chunk 名称
Webpack将为每个生成的块指定一个名称，该块的名称与条目的配置相关：
如果entry是字符串或者数组，那么只会生成一个Chunk，Chunk的名字是main如果entry是一个对象，则可能有多个块，块的名称是对象键-值对中键的名称Entry 配置动态。
如果项目中有多个页面需要为每个页面的入口配置一个Entry，但是这些页面的数量可能会不断增加，那么Entry的配置就会受到其他因素的影响，不能写成静态值。解决方法是将Entry设置为一个函数来动态返回上面的配置，代码如下：
//同步功能
条目：()={
返回{
答：。/pages/a ，
乙：。/页数/b ，
}
};
//异步函数
条目：()={
返回新承诺((解决)={
解决({
答：。/pages/a ，
乙：。/页数/b ，
});
});
};参数：context
Webpack 在寻找相对路径的文件时会以 context 为根目录，上下文默认为执行启动Webpack的当前工作目录。如果要更改上下文的默认配置，可以在配置文件中进行如下设置：
模块.导出={
上下文：path.resolve(__dirname，“app”)
}注意上下文必须是绝对路径字符串。此外，您还可以在启动Webpack时通过获取参数Webpack-context来设置上下文。
单个入口文件配置
用法：entry:stringArraystring
1、简写语法
网络包.配置. js
//因为是单个的，所以可以缩写为：
模块.导出={
条目：。/main.js
};上面的入门配置其实就是下面的简称。
模块.导出={
条目：{
主要：。/main.js
}
};2、数组语法
模块.导出={
条目：{
main:[。/main.js“，”。/main2.js]
}
};传入数组的目的是提前组合多个资源，打包时Webpack会使用数组中的最后一个元素作为实际的入口路径。
在使用字符串或数组定义单入口时，并没有办法更改chunk name，只能为默认的“main”。
多个入口文件配置
用法：entry: {[entryChunkName: string]: stringArray}
对象语法
模块.导出={
条目：{
应用程序：。/src/app.js ，
供应商：。/src/vendors.js
}
};这会很麻烦。然而，这是在应用程序中定义门户最具扩展性的方式。
“可扩展的 webpack 配置”:可重复使用，可与其他配置组合。这是一种将关注点从环境、构建目标和运行时中分离出来的流行技术。然后用一个特殊的工具(比如webpack-merge)把它们合并起来。
应用场景
1、单页应用
无论是框架，库，还是每个页面的模块，都是由app.js的单个入口引用的这样的好处是只会产生一个JS文件，依赖关系清晰。
模块.导出={
条目：。/src/app.js
};这种方式也有缺点，就是所有模块都打包在一起，当应用规模上升到一定程度时，会导致资源量过大，减缓用户的页面渲染速度。
在Webpack的默认配置中，当bundle大于250kB(压缩前)时，会认为bundle过大，打包时会发出警告，如下图所示：
2、分离第三方库(vendor)
为了解决上述问题，可以提取第三方供应商。
卖方是指“供应商”，在Webpack中vendor一般指的是工程所使用的库、框架等第三方模块集中打包而产生的bundle
模块.导出={
条目：{
应用程序：。/src/app.js ，
厂商：[react ， react-dom ， react-router]，
}
};但是，基于应用示例，我们添加了一个新的chunk名称作为供应商的门户，并将项目所依赖的第三方模块以数组的形式放置。
我们并没有为vendor设置入口路径，Webpack要如何打包呢？
这时候我们可以用CommonsChunkPlugin(CommonsChunkPlugin在Webpack 4之后已经废弃，所以可以采用optimization . split chunks)将app与vendor这两个chunk中的公共模块提取出来。
通过这种配置，app.js生成的bundle将只包含业务模块，其依赖的第三方模块将被提取出来生成新的bundle，这也实现了我们提取vendor的目的。
由于供应商只包含第三方模块，这部分不会经常改变。因此，可以有效地利用客户端缓存，并且当用户随后请求页面时，可以加快整体呈现速度。
3、多页应用
对于多页面应用的场景，为了尽可能减少资源的体积，我们希望每个页面都只加载各自必要的逻辑，而不是将所有页面打包到同一个bundle中。因此每个页面都需要有一个独立的bundle，这种情况是通过使用多个门户来实现的。请看下面的例子：
模块.导出={
条目：{
第一页：。/src/pageOne/index.js ，
第二页：。/src/pageTwo/index.js ，
第三页：。/src/pageThree/index.js
}
};上面的配置告诉webpack它需要三个独立的依赖图。这时，条目和页面是一一对应的，这样每个HTML都可以通过引入自己的JS来加载自己需要的模块。
有关编程的更多信息，请访问：编程视频！这就是webpack核心概念的入门配置细节。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。