视频聊天源码，多入口分包处理静态文件

视频聊天源码，多入口分包处理静态文件

首先要说明的是使用这种形式进行分包的场景很少.

概念

多入口指的是,我们在进行webpack 打包配置的时候,配置多个入口文件,让webpack 分别从不同的入口进行打包,这样每个入口打包的体积就会大大减小,而用户只会从一个入口进入,这样就大大减小了用户下载静态文件的体积.

用法:

1、在webpack 配置文件中配置多个入口:

const path = require('path');
 
module.exports = {
  entry: {
    main: './src/main.js',
    admin: './src/admin.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2、配置各个入口文件 共同依赖的第三方库

这里首先需要把每个入口的配置由字符串转化为一个对象,在这对象中,

（1）import 属性的值代表 入口文件的路径
（2）dependOn 属性的值 代表这个入口 要使用那个共享的 配置

shared 代表一个共享配置,shared 可以有多个,命名形式可以是shared1,shared2,…
shared 值代表这个共享配置,具体共享那些 第三方库

const path = require('path');
 
module.exports = {
  entry: {
    main:{
       import: './src/main.js',
       dependOn: 'shared'
    } 
    admin:{
       import: './src/admin.js',
        dependOn: 'shared'
    },
    shared: ['axios']
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  }
};

以上就是视频聊天源码，多入口分包处理静态文件， 更多内容欢迎关注之后的文章