欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Webpack配置多入口

程序员文章站 2022-07-12 19:23:01
...

原文链接

我们平常一般都是用Webpack来配置单页面应用,但是有些特殊情况下需要多个页面来实现,Webpack是支持我们来打包多页面的,下面就来说一下配置方法吧:

第一步: 更改Webpack.config.js中的 entry配置

  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },

第二步:更改 output的配置,以支持多文件输出

  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },

第三步: 增加HtmlWebpackPlugin插件

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'First Page',
      filename: 'first.html',
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'Second Page',
      filename: 'second.html',
      chunks: ['print']
    })
  ]

如果有多个页面就增加多个HtmlWebpackPlugin插件

chunks 用来配置打包后的html页面中引用哪些资源,对应的也就是entry中配置的key

运行打包命令后应该能在dist目录中看到 2个html页面,并且first.html中引入了app.bundle.jssecond.html中引入了print.js这样我们就实现了Webpack的多页打包输出

原文链接

相关标签: 前端