webpack进阶--02--多页面应用配置

最新推荐文章于 2024-01-15 10:25:49 发布

赵天明

最新推荐文章于 2024-01-15 10:25:49 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack 多页面

本文链接：https://blog.youkuaiyun.com/guzhao593/article/details/96460056

webpack 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于Webpack的多应用项目配置方案，包括开发和生产环境下的entry配置、output配置及html配置，并实现了根据不同环境加载对应的依赖包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目文件结构：

├─build
├     ├─webpack.base.js
├     ├─webpack.dev.js
├     └─webapck.prod.js
├─package.json
├
├─src
    └─views
          ├─admin
          ├     ├─index.js
          ├     └─index.html
          └─client
                ├─index.js
                └─index.html

`entry`配置

开发环境（dev）:

entry: {
    admin: [
      resolve('./src/views/admin/index.js'),
      'webpack-hot-middleware/client?quiet=true' // 如果是通过webpack-hot-middleware启动热更新的，需要加上热更新的客户端
    ],
    client: [
      resolve('./src/views/client/index.js'),
      'webpack-hot-middleware/client?quiet=true' // 如果是通过webpack-hot-middleware启动热更新的，需要加上热更新的客户端
    ]
  }

生产环境（prod）:

entry: {
    admin: [
      resolve('./src/views/admin/index.js')
    ],
    client: [
      resolve('./src/views/client/index.js')
    ]
  }

`output`配置

output: {
  filename: '[name].[hash:8].js',  // 因为是多应用，所以必须通过名称匹配的方式生成打包文件
  path: './dist',
  publicPath: '/'
}

`html`配置

因为是多页面应用，所以每个应用都有一个独立的html文件

通过html-webpack-plugin插件来配置，需要达到以下目标：

每个html文件只加载对应应用需要的依赖包
可以根据不同环境加载不一样的依赖包

开发环境（dev）:

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('./src/views/admin/index.html'),
      chunks: ['admin'], // 设置chunks可以只安装指定的依赖包，如果不设置，则会将所有依赖包全部加载
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: 'client.html',
      template: resolve('./src/views/client/index.html'),
      chunks: ['client'], // 设置chunks可以只安装指定的依赖包，如果不设置，则会将所有依赖包全部加载
      inject: true
    })
  ]

生产环境（prod）:

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('./src/views/admin/index.html'),
      chunks: ['admin'],
      inject: true,
      minify: true  // 压缩文件
    }),
    new HtmlWebpackPlugin({
      filename: 'client.html',
      template: resolve('./src/views/client/index.html'),
      chunks: ['client'],
      inject: true,
      minify: true // 压缩文件
    })
  ]