webpack entry入口 - SegmentFault 思否
source link: https://segmentfault.com/a/1190000040299256
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
webpack entry入口
上一节我们讲到了 webpack
的配置文件 webpack.config.js
,这个文件需要我们手动在项目根目录下创建。创建后要对其进行配置,本节我们来看一下如何配置 webpack
中的入口,也就是 entry
属性。
entry
入口可以用于指定 webpack
是从哪个模块开始构建项目的,通过配置 entry
属性的值可以指定一个或多个入口起点,默认值为 ./src
。
entry 的三种形式
在 webpack.config.js
配置 entry
属性,有三种形式的值,其中 string
和 array
用于配置单个入口。object
用于配置多个入口。
string
:字符串类型,入口模块的文件路径可以是相对路径。array
:数组类型,可以将多个文件打包为一个文件。object
:对象类型,每个入口生成一个Chunk
。
单个入口配置
如果要配置单个入口文件,可以给 entry
指定一个 string
或者 array
类型的值,这样就只会生成一个 chunk
,当没有配置入口的文件对象名称时,默认使用 main
。
例如我们如果要给 entry
属性传递一个字符串类型的值,可以像下面这样写:
entry:'./path/file.js'
另外,如果传入的是一个数组类型的值,则将会创建多个主入口,并将它们的依赖导向到一个chunk
中。例如下面代码表示当我们执行命令后,a.js
和 b.js
会合并打包到 bundle.js
文件中:
entry:['./path/a.js','./path/b.js'],
我们可以通过一个具体的小例子来看一下 entry
的使用。下面是我们需要的代码:
// a.js文件
function a(){
console.log("这是一个a.js文件");
}
// b.js文件
function b(){
console.log("这是一个b.js文件");
}
然后配置 webpack.config.js
文件:
module.exports = {
entry:['./a.js','./b.js'], // 传入一个数组
output:{
path:__dirname,
filename:'./bundle.js'
}
}
接着执行 npm run build
命令,可以看到,a.js
和 b.js
文件同时被打包到 bundle.js
文件中啦,如下图所示:
多个入口配置
如果我们想要为 webpack
配置多个入口,则可以为 entry
设置一个 object
类型的值。语法如下:
entry: {[entryChunkName: string]: string|Array<string>}
对象语法会比较繁琐,但是这是应用程序中定义入口的最可扩展的方式。
简单点理解其实就是在 entry
中设置键值对:
entry: {
key1: value1,
key2: value2,
...
}
这是最完整的 entry
配置,其他形式只是它的简化形式而已。对象中的每一对属性对,都代表着一个入口文件,因此多页面配置时,就可以使用这种形式的 entry
配置。
要实现分离应用程序和第三方库入口,webpack.config.js
配置文件的代码如下所示:
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
这表示 webpack
将从 app.js
和 vendors.js
开始创建依赖图,并且这些依赖图是完全分离、互相独立的。这种方式比较常见于只有一个入口起点的单页应用程序中。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK