单页面应用:整个应用里面只有一个html文件。现在主流的框架,vue,react都是单页面应用。
所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进行打包
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html template</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

index.js

import React, {Component} from 'react';
import ReactDom from 'react-dom'; class App extends Component{
  render() {
    return (
      <div>this is home page</div>
    )
  }
}
ReactDom.render(<App/>, document.getElementById('root'));

list.js

import React, {Component} from 'react';
import ReactDom from 'react-dom'; class App extends Component{
  render() {
    return (
      <div>this is list page</div>
    )
  }
}
ReactDom.render(<App/>, document.getElementById('root'));

webpack.common.js

const plugins = [
  // HtmlWebpackPlugin会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中
  new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'index.html',
    chunks: ['vendors', 'main']
  }),
  new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'list.html',
    chunks: ['vendors', 'list']
  }),
  new CleanWebpackPlugin()
];

这里新建两个HtmlWebpackPlugin。HtmlWebpackPlugin是用来自动生成静态页面用的.模板是index.html,生成的文件名是index.html和list.html,里面植入的chunks分别是main和list。那么实际上多个页面就是多个HtmlWebpackPlugin

webpack多页面打包配置的更多相关文章

  1. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

  2. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  3. webpack 3.X学习之多页面打包

    简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...

  4. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  5. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  6. webpack多页面应用打包问题-新增页面打包JS影响旧有JS资源

    webpack多页面应用打包问题:如果在项目里新增页面,pages目录中插入一个页面文件,然后打包代码,在webpack3中,新增页面文件上方文件打包出来的JS文件内容全部会改变,点击查看比对,发现问 ...

  7. webpack + vuecli多页面打包基于(vue-template-admin)修改

    转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...

  8. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  9. 【nodejs代理服务器二】nodejs webpack打包配置踩坑总结

    接着上篇用Nodejs开发web代理,防止web渗透.如果部署到正式环境,需要进行打包配置. 我在用webpack打包配置中遇到了几个错误,总结如下: webpack环境变量问题 https://ww ...

随机推荐

  1. iOS-打印控件

    20.UIPrintFormatterUIPrintFormatter时打印格式化的抽象基类:展示了传统的可打印的内容对象可以跨页边界.由于打印格式化,打印系统,可以自动打印与打印格式化的内容相关联的 ...

  2. Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

    现象 在用`mobx-react-router`的`this.props.history.push("/")`的时候,浏览器会提示 Warning: Hash history ca ...

  3. centos umount 卸载出错

    target is busy. (In some cases useful info about processes that use the device ) or fuser()) 解决 fuse ...

  4. Java IO把一个文件中的内容以字符串的形式读出来

    代码记录(备查): /** * 把一个文件中的内容以字符串的形式读出来 * * @author zhipengs * */ public class FileToString { public sta ...

  5. PHP去重的简单写法

    PHP去重的简单写法用array_flip实现去重效果 <pre><?php$arr =array("a"=>"a1","b& ...

  6. linux中安装软件的方法

    1. apt-get 安装方法ubuntu 世界有许多软件源,在系统安装篇已经介绍过如何添加源, apt-get 的基本软件安装命令是: sudo apt-get install 软件名 2. 编译安 ...

  7. RocketMq 集群方式搭建 步骤教学包教包会

    mq集群方式搭建 有段时间没写这些技术文章了, 今天抽空写一点,不然自己都快忘记了 这篇文章记录了rocketmq 集群方式搭建的过程, 也是自己半天的成果记录吧! 感兴趣的朋友点个赞在走呗! 好了, ...

  8. Git学习记录(一)

    本篇文章介绍Git的本地使用 Git是什么? Git是世界上最先进的分布式版本控制系统. 那么什么是版本控制系统? 我们来举个例子,假设我创建了一个项目Project.1,里面写了一个README.t ...

  9. Java同C#的语法不同之处

    Java同C#的语法不同之处... [注:转载而来但原出处不详:若是您原创请联系我]1,命名空间与包 C#为了把实现相似功能的类组织在一起,引入了命名空间的概念(namespace) Java中与此对 ...

  10. ASP.net Web API综合示例

    目录 概述 功能介绍 程序结构 服务器端介绍 客户端介绍 “契约” Web API设计规则 并行写入冲突与时间戳 身份验证详解 Web API验证规则 客户端MVVM简介 Web.Config 本DE ...