webpack build externals

外部化（externals）是指在构建过程中将某些依赖排除在打包文件之外，而是通过在运行时从外部引入这些依赖。对于使用Webpack构建的项目，可以通过配置externals来实现这一目的。

配置externals的步骤如下：

1. 在webpack配置文件中找到externals选项。
2. 在externals选项中，可以指定一个对象来描述需要外部化的依赖。
3. 对象的键表示需要外部化的模块名称，值表示在引入模块时使用的全局变量。例如，键可以是模块的名称，值可以是模块在全局作用域中暴露的变量。
4. 当Webpack构建过程中遇到需要外部化的模块时，会将这些模块排除在打包文件之外，并在运行时从外部引入。

以下是一个示例的webpack配置文件，演示了如何使用externals：

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

在上面的示例中，`jquery`和`lodash`模块被配置为外部化，分别使用全局变量`jQuery`和`_`进行引入。

使用externals可以减小打包文件的体积，并且可以利用全局变量或通过其他方式加载外部脚本来提供这些依赖项。这对于一些常见的库或框架如jQuery、React等特别有用，因为它们通常会被作为外部脚本引入。

相关问题

webpack externals

webpack externals是webpack配置中的一个选项，用于指定哪些模块应该被视为外部依赖，不会被打包进最终的输出文件中。

在webpack中，通常会将项目中的第三方库或者共享模块作为外部依赖来引入。这样可以减小打包文件的体积，并且利用CDN或其他方式来加载这些外部依赖。通过使用externals选项，我们可以告诉webpack哪些模块是外部的，webpack在打包时会排除这些模块，让它们在运行时从外部引入。

externals选项可以是一个对象或一个函数。对象的键表示要排除的模块名，值表示该模块在全局环境中的变量名。函数的参数是模块的名称，返回值是该模块在全局环境中的变量名。例如：

// webpack.config.js
module.exports = {
  // ...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

上述配置告诉webpack将react和react-dom模块视为外部依赖，并在打包时不将它们包含在输出文件中。在使用这些模块时，我们需要确保它们在运行时已经被加载。

请注意，externals选项只影响输出文件的打包行为，并不会影响代码中对这些模块的引用。因此，我们需要在运行环境中确保这些模块可用，比如通过在HTML文件中引入CDN链接。

webpack build 没有css

webpack build 没有 css 可能是因为在 webpack 的配置文件中没有对 css 进行相应的处理。要在 webpack 中处理 css，需要安装 css-loader 和 style-loader，并在配置文件中添加相应的 loader 配置。

具体来说，可以按照以下步骤进行配置：

1. 在项目中安装 css-loader 和 style-loader：

npm install --save-dev css-loader style-loader

2. 在 webpack 配置文件中添加 loader 配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

这个配置的含义是，在遇到文件名以 .css 结尾的文件时，先使用 css-loader 处理 css，再使用 style-loader 将 css 插入到 HTML 文件中。

3. 确保在 webpack 配置文件中正确引入了 css 文件。

通过以上步骤，应该可以解决 webpack build 没有 css 的问题。希望能对你有所帮助！