配置多入口

描述入口的对象：

  • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
  • filename: 指定要输出的文件名称。 import : 启动时需加载的模块。
  • library: 指定 library 选项，为当前 entry 构建一个 library。
  • runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。

  • publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。

    1. entry: {
    2. main: {
    3.   import: ['./src/app2.js', './src/app.js'], //将两个js包含的 打包到一个
    4.   dependOn: 'lodash',
    5.   filename: 'chanel1/[name].js'
    6. },
    7. main2: {
    8.   import: './src/app3.js',
    9.   dependOn: 'lodash',
    10.   filename: 'chanel2/[name].js'
    11. },
    12. lodash: {
    13.   import: 'lodash', //第三方类库直接写名
    14.   filename: 'common/[name].js'
    15. }
    16. },

    打包效果
    image.png

    配置 index.html 模板

    要生成多个HTML文件，请在插件数组中多次声明插件 

    1. plugins: [
    2. new HtmlWebpackPlugin({
    3.   title: '多页面应用',
    4.   template: './index.html',
    5.   inject: 'body',
    6.   filename: 'chanel1/index.html',
    7.   //这里引用的是上边入口的chunk(每个入口会生产一个chunk),之后html会引入这两个
    8.   chunks: ['main', 'lodash'], 
    9.   publicPath: 'http://www.b.com/'
    10. }),
    12. new HtmlWebpackPlugin({
    13.   template: './index2.html',
    14.   inject: 'body',
    15.   filename: 'chanel2/index2.html',
    16.   chunks: ['main2', 'lodash'],
    17.   publicPath: 'http://www.a.com/'
    18. })
    19. ],

    html可以这样获取title 由htmlWebpackPlugin提供

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.   <meta charset="utf-8"/>
  5.   <title><%= htmlWebpackPlugin.options.title %></title>
  6.   </head>
  7.   <body>
  8.   </body>
  9. </html>

打包效果
image.png