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

深碍√TFBOYSˉ_ 2022-05-26 00:16 172阅读 0赞

参考[官方文档][Link 1]，首先来看 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。

[Link 1]: https://doc.webpack-china.org/concepts/entry-points/