webpack不同入口文件分别配置不同的externals

在 webpack 的配置文件中，可以通过使用不同的入口文件配置不同的 externals。externals 选项用于配置不打包某些依赖的库。

示例：

module.exports = {
  // ...
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  },
  externals: {
    // key 为入口文件名，value 为不打包的依赖
    app: {
      'jquery': 'jQuery'
    },
    vendors: {
      'lodash': '_'
    }
  }
};

在这个示例中，当 webpack 打包 app 入口文件时，会忽略使用 jquery，而打包 vendors 入口文件时，会忽略使用 lodash。

需要注意的是，当配置 externals 时，需要在项目中手动引入对应的库，否则在运行时会报错。

相关问题

怎么给不同的入口配置不同的externals

在 webpack 配置文件中，可以使用 externals 配置项来配置不同的入口的 externals。externals 配置项接受一个对象，其中键表示模块的名称，值表示模块在运行时的全局变量。可以为每个入口配置一个 externals 对象。

例如，如果要为入口 "entry1" 配置 externals，可以这样配置：

module.exports = {
  // ...
  entry: {
    entry1: './entry1.js',
    entry2: './entry2.js',
  },
  externals: {
    entry1: {
      jquery: 'jQuery',
    },
    entry2: {
      lodash: '_',
    },
  },
  // ...
};

在上面的配置中，entry1 模块将被配置为不包含 jQuery，而 entry2 模块将被配置为不包含 lodash。这意味着 webpack 将不会为这些模块打包这些库，而是在运行时通过全局变量访问它们。

webpack常用配置

Webpack是一个打包工具，可以将多个模块打包成一个或多个bundle。常用的配置如下：

1.入口(entry)：webpack打包的入口文件，可以是一个或多个，一般为一个JS文件。

2.输出(output)：打包后文件的输出路径和文件名。

3.Loader：用于对文件进行转换处理，如将ES6转换为ES5，将CSS转换为JS等。

4.Plugins：用于扩展Webpack的功能，如压缩代码、处理HTML文件等。

5.Source Map：用于调试，将打包后的代码映射回原始代码。

6.Mode：指定打包模式，有development和production两种模式，分别用于开发和生产环境。

7.Resolve：用于指定模块的解析规则，如别名、后缀名等。

8.DevServer：用于开启一个本地服务器，方便开发调试。

9.Externals：用于指定不需要打包的模块，如CDN引入的jQuery等。

10.Performance：用于配置性能相关的选项，如打包文件大小的限制等。