分离方法

第一种：多个入口时，多入口的共享文件会分别在每一个包中重复打包
第二种：防止了第一种打包时会重复打包的问题
第三种：动态导入，通过模块的内联函数import

入口起点

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // 配置多入口
  entry:{
    index:"./src/index.js",
    another:"./src/another-module.js"
  },
  output:{
    // [name]会获取到entry中的key值，（这是多入口时必须要的，否则会提示这两个文件会被打包成一个文件名,进而引起冲突）
    // 这将会有利于生成不同的打包后文件名
    filename:"[name].bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true,
    assetModuleFilename:"images/[contenthash][ext]"
  },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // {
      //   test:/\.png$/,
      //   type:"asset/resource",
      //   generator:{
      //     filename:"images/[contenthash][ext]"
      //   }
      // },
      // {
      //   test:/\.svg$/,
      //   type:"asset/inline",
      // },
      // {
      //   test:/\.txt$/,
      //   type:"asset/source",
      // },
      // {
      //   test:/\.jpg$/,
      //   type:"asset",
      //   // 解析器
      //   parser:{
      //     // 定义是否生成URL的临界值，当文件大于时创建，反之生成URL
      //     dataUrlCondition:{
      //       maxSize:4*1024*1024
      //     }
      //   }
      // }
      // {
      //   test:/\.css$/,
      //   use:["style-loader","css-loader"]
      // }
    ]
  }
}

通过这种方式打包时会将入口文件中引入的库页一并进行打包。并且在打包过程中即使两个入口文件都引入了同一个库，但是在打包时会各自的打包各自的引入文件（会多次打包同一个文件），而不是相同的库被提取出来打包成一份

防止重复

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // 配置多入口
  entry:{
    // 设置入口文件
    index:{
      import:"./src/index.js",
      // 设置文件是否可以共享    
      dependOn:"shared"
    },
    another:{
      import:"./src/another-module.js",
      dependOn:"shared"
    },
    // 提取公共文件，并取名为shared
    // 同上面两个入口文件中都有loadsh模块时，将loadsh提取出来并重命名为shared
    shared:'loadsh'
  },
  output:{
    // [name]会获取到entry中的key值，（这是多入口时必须要的，否则会提示这两个文件会被打包成一个文件名,进而引起冲突）
    // 这将会有利于生成不同的打包后文件名
    filename:"[name].bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true,
    assetModuleFilename:"images/[contenthash][ext]"
  },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // ...
    ]
  }
}

打包：（将shared单独抽离）

在webpack中使用插件实现上面的过程

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // 配置多入口
  entry:{
    index:"./src/index.js",
    another:"./src/another-module.js"
  },
  output:{
    // [name]会获取到entry中的key值，（这是多入口时必须要的，否则会提示这两个文件会被打包成一个文件名,进而引起冲突）
    // 这将会有利于生成不同的打包后文件名
    filename:"[name].bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true,
    assetModuleFilename:"images/[contenthash][ext]"
  },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // ...
    ]
  },
  // 优化插件
  optimization:{
    // 压缩代码
    minimizer:{
      new CssMinimizerPlugin()
    },
    // 分离代码
    // 配置后，将会自动把公共的代码抽离到单独的文件中
    splitChunks:{
      chunks:"all"
    }
  }
}

动态导入

通过import函数动态的导入需要的模块，impoort返回一个promise对像。
通过import函数动态导入的模块最后会被抽离出来单独打包
在src文件的根目录创建一个async-module.js文件

function getCompnent() {
  // 通过import来处理loadsh这一文件
  // import 会返回一个promise对象
  return import("loadsh")
    .then(({default:_})=> {
      const element = document.createElement("div")
      element.innerHTML = _.join(["HEllo","webpack"]," ")
      return element
    })
}
getComponent().then((element) => {
  document.body.appendChild(element)
})

在入口文件中引入这个文件
这时打包就会将loadsh抽离了单独打包。

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  // 配置多入口
  entry:{
    index:"./src/index.js",
    another:"./src/another-module.js"
  },
  output:{
    // [name]会获取到entry中的key值，（这是多入口时必须要的，否则会提示这两个文件会被打包成一个文件名,进而引起冲突）
    // 这将会有利于生成不同的打包后文件名
    filename:"[name].bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true,
    assetModuleFilename:"images/[contenthash][ext]"
  },
  // mode:"development",
  // devtool:"inline-source-map",
  // plugins: [
  //   new HtmlWebpackPlugin({
  //     template:"./index.html",
  //     filename:"app.html",
  //     inject:"body"
  //   })
  // ],
  // 定义哪些资源文件需要打包
  module:{
      rules:[
      // ...
    ]
  },
  // 优化插件
  optimization:{
    // 压缩代码
    minimizer:{
      new CssMinimizerPlugin()
    },
    // 分离代码
    // 配置后，将会自动把公共的代码抽离到单独的文件中
    // splitChunks:{
    //   chunks:"all"
    // }
  }
}

当动态导入和静态导入一起使用时，需要使用代码分离的优化配置：如下

懒加载

懒加载是动态导入的一个应用

重命名动态导入文件的打包文件名

通过 / webpackChunkName: ‘math’ / 可以将打包文件重命名

import(/* webpackChunkName: 'math' */./math.js).then(...)

预获取/预加载模块

import(/* webpackChunkName: 'math',webpackPrefetch:true */./math.js).then(...)

在加载math.js的打包文件（math.boundle.js）时，这一加载过程会被放到最后（浏览器空闲的时候），当其他非预加载文件加载完成后，才会加载这个文件（将将来需要的模块先加载下来）。
webpackPrefetch 这个属性会让文件在页面初始化时就被加载，但一般都是放在浏览器空闲时加载。
效果：导入时加上了rel=”prefetch”属性

import(/* webpackChunkName: 'math',webpackPreload:true */./math.js).then(...)

webpackPreload这个属性不用于实现模块的并行加载（与懒加载有点相似）