【webpack】entry 和output的详细介绍

最新推荐文章于 2023-11-01 08:41:22 发布

cygnet_js

最新推荐文章于 2023-11-01 08:41:22 发布

阅读量1.4w

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/u013193851/article/details/55842982

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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.