首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在子目录中构建webpack供应商文件

是指在使用webpack构建项目时,将第三方库或模块单独打包成一个供应商文件,以便在项目中引用。这样做的好处是可以提高项目的加载速度,减少重复加载的代码量。

具体步骤如下:

  1. 在webpack配置文件中,通过entry属性指定入口文件,可以是一个或多个文件。
  2. 在output属性中,通过设置filename属性指定输出的供应商文件名,一般命名为vendor.js。
  3. 在plugins属性中,使用CommonsChunkPlugin插件将第三方库或模块打包成供应商文件。配置如下:
代码语言:txt
复制
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom', 'lodash'] // 第三方库或模块
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
};

在上述配置中,entry属性中的vendor数组指定了需要打包成供应商文件的第三方库或模块,如react、react-dom和lodash。CommonsChunkPlugin插件会将这些库或模块打包成vendor.bundle.js文件。

使用webpack构建后,会在输出目录(如dist目录)中生成vendor.bundle.js文件。在项目中引用供应商文件时,只需在HTML文件中添加以下代码:

代码语言:txt
复制
<script src="vendor.bundle.js"></script>

这样就可以在项目中使用打包好的供应商文件了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供了多种配置和操作系统选择,适用于各种应用场景。详情请参考:腾讯云云服务器

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于存储和处理各种类型的文件和数据。详情请参考:腾讯云对象存储

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券