webpack 中 entry 的配置 之 合并指定文件为指定的名字

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/latency_cheng/article/details/80026767

参考官方文档，首先来看 webpack.config.js 中entry的几种写法：

1、单入口简写

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

只有一个入口的时候，用这种写法很方便，它实际上是下面这种写法的简写

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

2、entry中传入数组

const config = {
  entry: ["./path/to/my/entry/file1.js","./path/to/my/entry/file2.js"]
};

文档中是这样说的

当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

这段话个人觉得不是很好理解，其实简单的说，就是 当我们要把几个文件合并到一起的时候，给entry中传入数组就行了，如果要指定合并后文件的名字，就这样写：

const config = {
  entry: {
    file: ["./path/to/my/entry/file1.js","./path/to/my/entry/file2.js"]
  }
};

3、entry中传入对象

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

这是最常用的方式，也是最便于扩展的方式，比如可以帮助我们分离应用程序(app) 和 第三方库(vendor) 入口。

4、对于多个entry，output中应该使用占位符(substitutions)来确保每个文件具有唯一的名称

{
  entry: {
    app: './src/app.js',
    vendor: ['./src/vendor1.js','./src/vendor2.js']
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/vendor.js

在这个例子中，我们将应用程序和第三方库分离，应用程序打包为./dist/app.js，两个第三方库./src/vendor1.js和./src/vendor2.js合并为./dist/vendor.js。