【webpack】entry 和output的详细介绍

entry

entry是指页面中的入口文件。也就是打包从哪个文件开始。

entry的值有三种类型 ： 1.字符串，2.数组， 3.对象

1.字符串

指定从这个文件路径下面的文件作为打包的入口文件entry: './app.js'2.数组
当存在多个入口时 ，可以使用 Array 的方式，比如依赖第三方库 bootstrap ，最终 bootstrap 会被追加到打包好的 index.js 中，数组中的最后一个会被 export。

{
entry: ['./src/index.js', './vendor/bootstrap.min.js'],
output: {
path: './dist',
filename: "index.js"
}
}

3.对象

设置多个打包目标。每一对键值对都对应着一个入口文件。常用语多页面入口文件配置

{
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
path: './dist/',
filename: '[name].js'
}
}

output
是指生成的文件输出到哪个地方去。主要有两个属性 path和 filename。其次就是publicPath 和chunkFileName

path

 可能对应文件路径,
也可能是从 url 访问的情况下的路径

filename

 用来配置生成的文件名, 

publicPath: 用于存放静态资源文件路径。 //webpack-dev-server访问的路径

chunkFilename:"[name].js" 

主要用于按需加载。生成块状文件
下面是官网描述：
output.publicPath

The 

publicPath

 specifies
the public URL address of the output files when referenced in a browser. For loaders that embed 

<script>

 or 

<link>

tags
or reference assets like images, 

publicPath

 is
used as the 

href

 or 

url()

 to
the file when it’s different than their location on disk (as specified by 

path

).
This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also uses this to determine the path where the output files are expected to be served from. As with 

path

 you
can use the 

[hash]

substitution
for a better caching profile.