webpack build externals

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

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

以下是一个示例的webpack配置文件，演示了如何使用externals：
module.exports = {
// ...
externals: {
jquery: 'jQuery',
lodash: '_'
},
// ...
};
登录后复制
在上面的示例中，jquery和lodash模块被配置为外部化，分别使用全局变量jQuery和_进行引入。
使用externals可以减小打包文件的体积，并且可以利用全局变量或通过其他方式加载外部脚本来提供这些依赖项。这对于一些常见的库或框架如jQuery、React等特别有用，因为它们通常会被作为外部脚本引入。

相关问题

vue如何安装配置file-loader、webpack-node-externals

Vue项目中安装和配置File Loader以及Webpack-node-externals主要是为了支持非JavaScript静态资源的打包，比如图片、CSS、JSON等，并处理Node.js模块外部引用的问题。以下是具体的步骤：

安装File Loader:
使用npm（Node Package Manager）全局安装：
npm install -D file-loader
登录后复制
或者在Vue项目的package.json的devDependencies里单独安装：
npm install --save-dev file-loader
登录后复制

配置File Loader:
将File Loader添加到.vue文件的build或webpack.config.js中。在module.rules部分添加一个新的规则，示例：
{
test: /\.(png|jpe?g|gif|svg|eot|woff(2)?|ttf|wav|mp3)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'public/assets/images/', // 输出路径
publicPath: '/assets/images/' // 静态资源引用路径
}
}
}
登录后复制

**安装Webpack-D webpack-node-externals
这个插件用于告诉Webpack忽略在生产环境不必要的Node.js核心模块引用。
登录后复制

配置Webpack-node-externals:
在config/index.js或对应的构建配置文件中，将它添加到plugins数组中：
module.exports = {
// ...
optimization: {
runtimeChunk: 'single'
},
externals: ['fs', 'path', '__dirname'], // 添加需要排除的Node.js模块
plugins: [
new webpack.NodeExternals({
whitelist: ['express'] // 可以自定义要排除的具体模块
})
]
// ...
};
登录后复制

注意，以上配置可能会根据你的实际项目结构和需求有所不同。记得在运行npm run build或yarn build时查看是否有新的警告或错误。