本文主要讲了webpack怎么搭建多页应用，熟悉下webpack的基本用法。

新建文件夹，目录结构如下：

然后

  • cd webpack-test
  • npm init（根目录下创建了一个pakage.json）
  • npm install webpack@1.15.0 --save-dev（安装webpack，我这里用的是1版本）

根目录下新建webpack.config.js开始配置，参照这里

js部分的处理：

演示：在src > page > index下新建index.js随便输入一行代码，比如console.log('index'),修改webpack.config.js

在命令行输入webpack，可以看到根目录下多了个dist文件夹，src/page/index/index.js被打包到了dist/index.js里面，下面我们修改哈配置文件，让他可以打包多入口的情况

这样我们已经可以分别打包了，但是如果index > index.js 和 login > index.js同时引用了一个公共js，我们也希望可以把公共的东西提取出来单独打包，这就要用到webpack的插件CommonsChunkPlugin，参考这里，注意：webpack4中已经没有这个插件

现在让index > index.js 和 login > index.js 同时 require('./../common.js')，修改配置文件:
config里面添加代码:

plugins: [

    new webpack.optimize.CommonsChunkPlugin({

        name: 'common', // 对应入口处的common，会整体打包入common

        filename: 'js/base.js'

        // chunks: ['common']

    })

  ]

这里用了new webpack.optimize.CommonsChunkPlugin，所以需要在前面var webpack = require('webpack')

index > index.js：

require('./../common.js')

console.log('index')

login > index.js:

require('./../common.js')

console.log('login')

再次打包，可以看到common.js被单独打包到了base.js

html部分的处理：html-webpack-plugin

上面已经可以打包js了，如果现在我们要测试打包的内容，需要在page > view 下新建index.html,引入dist/js下面的js,我们想把html也打包到dist,按需引入自己的js,参考这里

这里要用到插件，需要安装：npm i --save-dev html-webpack-plugin

参见文档修改配置：

new HtmlWebpackPlugin({

   // 打包后的目标文件

   filename: 'view/index.html',

   // 要打包的目标文件

   template: 'src/view/index.html',

   inject: true,

   hash: true,

   // 表示当前html引入公共js和与当前对应的js

   // 需要引入哪些js

   chunks: ['common', 'index']

})

执行webpack,可以看到打包成功，点开dist/view/index.html：

说明打包成功，base.js和index.js都正确引入
面对多页应用，我们还经常面临多个页面头部和底部相同的情况，每个页面去写未免有点麻烦，我们可以用html-loader解决这个问题
安装:npm install html-loader --save-dev

view下新建layout文件夹,再分别新建header.html和footer.html
heder.html:

<meta charset="utf-8">

<title></title>

footer.html:

<div>我是footer</div>

然后在index.html里面修改：

<!DOCTYPE html>

<html>

<head>

    <%= require('html-loader!./layout/head.html')  %>

</head>

<body>

index

<%= require('html-loader!./layout/footer.html')  %>

</body>

</html>

再次打包，可看到：

到此，公共html也生效了，还剩下样式的处理和单独打包，下次继续
第一次写，有些凌乱

webpack多页应用的更多相关文章

  1. webpack 多页应用架构系列实战

    阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpac ...

  2. 利用免费cdn加速webpack单页应用

    回顾现状 在之前的学习过程中,react单页应用经过webpack打包之后会输出大概如下的目录结构,它就是站点的所有前端组成了:   1 2 3 4 5 6 MacBook-Pro:output ba ...

  3. webpack 教程 那些事儿06-gulp+webpack多页

    本篇主要讲述用gulp+webpack构建多页应用 折腾到现在,项目还必须要进行,.vue文件必须要加载,也就是webpack必须引入.时间不多了,抛弃上个方案之后,只能牺牲热加载性能,用gulp+w ...

  4. webpack多页应用架构系列（一）：一步一步解决架构痛点

    这系列文章讲什么? 前些时间,写过一个项目,前后端分离,没有借助任何框架,项目页面特别的多,页面都是html直接写的,许多公共html,写了好多处,有一个地方需要改就得改好多地方,js也是随意写,每个 ...

  5. gulp+webpack多页应用开发，webpack仅处理打包js

    项目背景:一个综合网站,开发模式为后端嵌套数据,前端开发静态页面和部分组件. 问题:gulp任务处理自动刷新.sass编译等都是极好的.但是对于js的处理并不是很好,尤其是项目需要开发组件时候,如评论 ...

  6. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用v ...

  7. webpack 配置 Vue 多页应用 —— 从入门到放弃

    webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...

  8. webpack那些事儿

    webpack那些事儿01-webpack到底是什么 webpack那些事儿02-从零开始 webpack那些事儿03-热插拔 hot webpack那些事儿04-spa项目实战分析 webpack那 ...

  9. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

随机推荐

  1. Jmeter(十三) JDBC Request

    Jmeter中取样器(Sampler)是与服务器进行交互的单元.一个取样器通常进行三部分的工作:向服务器发送请求,记录服务器的响应数据和记录响应时间信息 有时候工作中我们需要对数据库发起请求或者对数据 ...

  2. 二十二：视图之add_url_rule和app.route

    flask注册视图有两种方式 一:add_url_rule()add_url_rule源码:rule:接口地址view_func=视图函数endpoint=终结点,可以理解为给当前视图取的别名,最直观 ...

  3. linux判断httpd端口是否打开

    判断端口是否打开 lsof -i:80 判断端口打开了几个 lsof -i:80 | wc -l

  4. Java编程思想—八皇后问题（数组法、堆栈法）

    Java编程思想-八皇后问题(数组法.堆栈法) 实验题目:回溯法实验(八皇后问题) 实验目的: 实验要求: 实验内容: (1)问题描述 (2)实验步骤: 数组法: 堆栈法: 算法伪代码: 实验结果: ...

  5. MySQL之视图学习

    MYSQL---视图 1.概述: ​ 视图是从一个或者多个表中导出的,视图的行为与表非常类似,但视图是一个虚拟表.在视图中用户可以使用SELECT语句查询数据,以及使用INSERT.UPDATE和DE ...

  6. tensorflow增强学习应用于一个小游戏

    首先需要安装gym模块,提供游戏的. 1,所需模块 import tensorflow as tf import numpy as np import gym import random from c ...

  7. python 并发编程 多进程 生产者消费者模型总结

    生产者消费者模型总结 生产者消费者模型什么时候用? 1.程序中有两类角色 一类负责生产数据(生产者) 一类负责处理数据(消费者) 2.引入生产者消费者模型为了解决的问题是 平衡生产者与消费者之间的速度 ...

  8. Linux下面误删除文件使用extundelete工具恢复介绍

    操作系统版本:CentOS release 6.4 (Final)      软件版本:extundelete-0.2.4.tar.bz2 PS:该软件恢复文件系统仅支持ext2/ext3/ext4 ...

  9. Spring（二）--Spring入门案例

    Spring入门案例 1.需要的实体类 2.需要的接口和实现类 3.需要的service和实现类 /** * service层的作用 * 在不改变dao层代码的前提下,增加业务逻辑操作 */ publ ...

  10. Java四类八项基本数据类型

    一. 四类八项基本数据类型 1. 整数类型(byte.short.int.long) 三点注意事项: a. Java各整数类型有固定的表示范围和字段长度,其不收操作系统的影响,以保持Java的可移植性 ...