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

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)