【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.

点这里可以跳转到人工智能网站

发表评论