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

╰半橙微兮° 2021-12-17 11:59 165阅读 0赞

**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文件夹  
![在这里插入图片描述][20190708180154249.png]  
打开生成的index.html，我们会发现同时引入了这两个js文件  
![在这里插入图片描述][20190708180357872.png]  
**打包注入域名**  
打包完成后的index.html，会将这个文件给后端，作为一个后端的入口文件，但是会将js文件上传到CDN这样的域名下面，那我们打包生成的index.html，我们希望不是引用main.js或者sub.js，希望前面多一个cdn地址的域名，类似于这种：  
![在这里插入图片描述][20190709093942987.png]  
打包完成之后，注入到html上的js前面多带一个cdn的域名，手动改肯定不靠谱，可以在output里面配置。

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

运行打包，就可以生效了  
![在这里插入图片描述][20190709095036377.png]  
如果项目后台需要引用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)

[20190708180154249.png]: /images/20211213/d2130e2c0da047edad410abcb3037ca2.png
[20190708180357872.png]: /images/20211213/d431ef110f134786afbbab60da60501b.png
[20190709093942987.png]: /images/20211213/0f9b597a123646739f06d443f47916bb.png
[20190709095036377.png]: /images/20211213/d3f13a5246434b5b9d16a2482725a5d5.png