持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

entry入口

什么是？

指定webpack打包入口文件，webpack执行构建的第一步将从Entry开始，可抽象成输入。

如何配置？

在webpack默认的webpack.config.js或者自定义的配置文件中配置，我们在默认的webpack.config.js中配置：

module.exports={
    entry:'./src/index.js',
    mode:'development'
}

这里如果不设置，webpack也会默认出口文件是'./src/index.js',当然入口文件也可以自己修改其他的文件，这里我们试着改成'./src/other.js'。
先贴一下我项目里的这几个文件代码。
src/index.js:

console.log('哈哈');

src/other.js:

function add(a,b){
  return a+b
}
console.log(add(2,3));

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>Webpack项目</div>
</body>
</html>

dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js"></script>
</head>

<body>

</body>
</html>

项目目录：

dist里面的index.html是我自己手动创建的，为了测试，自动生成的没有哦。
看一下入口文件是index.js时，出口文件里面是什么样的。
执行npm run test,执行构建，在package.json中配置的，也可用npx webpack命令:
package.json：

dist/index.html的输出效果：

入口文件输出的是入口文件src/index.js里面的代码。
现我们把入口文件改成src/other.js,看是否可以成功？
webpack.config.js:

module.exports={
    entry:'./src/other.js',
    mode:'development'
}

单入口，用一个字符串entry:'./src/index.js'会把它默认转换为对象的格式entry:{main:'./src/index.js'},默认的键名是：main
执行npm run test：

可看出是入口文件配置时修改成成功了，现看出口文件效果。出口文件dist/main.js:

dist/index.html输出效果：

成功输出src/other.js里面的代码结果的。

单入口应用、多入口应用

单入口应用

什么是？

一个单页面的应用，像早期的vue,react就属于这种，页面切换基本靠路由切换。
webpack默认是默认的就是单页面，因为只有一个入口，多入口的话，可在webpack.config.js中进行配置，单入口默认是个string字符串,如果是多入口，可设置为arr数组，obj对象，如下：
webpack.config.js：
单入口obj写法：

module.exports={
   // entry:'./src/other.js',
   entry:{
       main:'./src/other.js'
   },
   mode:'development'
}

多入口写法：

module.exports={
    // entry:'./src/other.js',
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    mode:'development'
}

entry对象中key的值是出口output中的文件名

可看到，构建成功后，chunks是2个，分别是我们设置的index和other,也就是说出口文件是他们2个。
看下项目列表发生了什么变化：

列表有2个出口文件分别是index.js和other.js。
但是这里要注意的是：入口文件是两个，出口output如果自己写死了，那么需要进行多出口的配置，如果自己乜有做任何修改的话，那么webpack会自己根据入口文件去匹配。

多入口应用

#### 什么是？
多页面应用，pc基本是多页面应用。
比如这个项目dist里创建多个html就是多页面应用。

output出口

什么是？

打包转换后的文件输出到磁盘的位置：输出结果，在webpack经过一系列处理并得出最终想要的代码输出结果。

如何配置？

在webpack.config.js中配置：
webpack.config.js：

const path = require("path");
module.exports={
    // entry:'./src/other.js',
    entry:{
        index:'./src/index.js',
        // other:'./src/other.js'
    },
    output: {
        filename: "index.js",//输出⽂件的名称
        path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
    },
    mode:'development'
}

注意点：
如果入口是多文件的话，出口这里也要做相应的配置处理，不能多个入口文件对应一个出口文件，会报错。

看一下多入口文件的出口文件如何配置：
webpack.config.js：

const path = require("path");
module.exports = {
    // entry:'./src/other.js',
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    output: {
        filename: "[name].js",//利用占位符，文件名不要重复
        path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
    },
    mode: 'development'
}

利用占位符[name]，占位符大致分为：[name]、[id]、[chunk]、[hash]、[chunkhash]、[contenthash] ，占位符的写法，两个中括号，指纹策略。
看结果：
文件目录：

配置修改成功了。

会配置webpack吗？请具体说一下entry、output

entry入口

什么是？

如何配置？

单入口应用、多入口应用

单入口应用

什么是？

多入口应用

output出口

什么是？

如何配置？