Web核心概念_（第三章）_Entry与Output的基础配置

最新推荐文章于 2022-09-28 10:09:12 发布

原创最新推荐文章于 2022-09-28 10:09:12 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

19 篇文章

订阅专栏

本文主要介绍了Webpack中Entry与Output的基础配置。包括entry打包入口文件的配置方式，打包多个文件时如何用占位符定义文件名，以及如何在打包时注入域名，还提到了output的publicPath配置项，最后给出了相关官方文档指引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Entry与Output的基础配置
entry打包的入口文件，entry可以配置为字符串，也可以配置为对象，默认生成的名字是main.js，当然也可以在output中指定生成文字的名字。

  entry: {
    main: "./src/index.js"
  },

打包多个文件该如何配置
如果想要src目录下的index.js反复打包两次，生成两个文件，例如第一个文件叫做main.js，第二个文件叫做sub.js该如何做呢

  entry: {
    main: "./src/index.js",
    sub: "./src/index.js"
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },

这样直接打包是会出错的，因为两个文件打包出来的名字都叫index.js，我们可以用占位符来定义打包完成的名字

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

这里的name指的是entry中对应的key值，这样打包就可以成功了生成的文件都在dist文件夹
在这里插入图片描述
打开生成的index.html，我们会发现同时引入了这两个js文件

打包注入域名
打包完成后的index.html，会将这个文件给后端，作为一个后端的入口文件，但是会将js文件上传到CDN这样的域名下面，那我们打包生成的index.html，我们希望不是引用main.js或者sub.js，希望前面多一个cdn地址的域名，类似于这种：
在这里插入图片描述
打包完成之后，注入到html上的js前面多带一个cdn的域名，手动改肯定不靠谱，可以在output里面配置。

  output: {
    publicPath: 'http://cdn.com/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

运行打包，就可以生效了
在这里插入图片描述
如果项目后台需要引用index.html，而静态资源放在cdn上的情况下，这个时候就可以用到output的publicPath的配置项
这几个是配置entry和output的常用配置项
官方文档：DOCUMENTATION—> CONFIGURATION---->Output
DOCUMENTATION—> GUIDES —> Output Management (html-webpack-plugin以及clean-webpack-plugin)
DOCUMENTATION—> PLUGINS—> HtmlWebpackPlugin(plugin documentation)