本文主要讲了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(六)事务

    事务是性能测试之必不可少的关注点, Jmeter默认把每一个请求都统计成了一个事务, 但有时候我们根据业务需求, 会把多个操作统计成一个事务, Jmeter当然也考虑到了这个需求, 因此我们可以通过逻 ...

  2. 三十：数据库之定义ORM模型，并映射到数据库

    连接数据库操作 sqlalchemy映射步骤: 1.创建ORM模型,这个模型必须继承sqlalchemy提供的基类2.在这个ORM模型中创建一些属性,与表中的字段一一映射,这些属性必须是sqlalch ...

  3. MySQL 树形结构 根据指定节点 获取其下属的所有子节点（包含路径上的枝干节点和叶子节点）

    背景说明 需求:MySQL树形结构, 根据指定的节点,获取其下属的所有子节点(包含路径上的枝干节点和叶子节点) 枝干节点:如果一个节点下还有子节点,则为枝干节点. 叶子节点:如果一个节点下不再有子节点 ...

  4. linux 系统下删除tar.gz的tar

    在终端输入: 1.删除环境配置 vi /etc/profile 删除对应的jdk配置. 2.删除jvm rm /usr/lib/jvm 3.删除对应的tar解压的java目录. 4.输入 java 或 ...

  5. Android的消息机制之ThreadLocal的工作原理

    ThreadLocal 可以把一个对象保存在指定的线程中,对象保存后,只能在指定线程中获取保存的数据,对于其他线程来说则无法获取到数据. 日常开发中 ThreadLocal 使用的地方比较少,但是系统 ...

  6. ibatis使用iterate实现批量插入insert正确写法

    由于想批量入库提升效率,最近实现了ibatis的批量插入,结果一直报错 :StringIndexOutOfBoundsException ,原来是value中的格式不正确. 本人邮箱:techqu@1 ...

  7. python selenium中Excel数据维护(二)

    接着python里面的xlrd模块详解(一)中我们我们来举一个实例: 我们来举一个从Excel中读取账号和密码的例子并调用: ♦1.制作Excel我们要对以上输入的用户名和密码进行参数化,使得这些数据 ...

  8. [转帖]Linux杂谈: 树形显示多级目录--tree

    Linux杂谈: 树形显示多级目录--tree https://www.cnblogs.com/tp1226/p/8456539.html tree -L 最近写博客的时候偶尔会需要将文件目录结构直观 ...

  9. [BJWC2008] Gate Of Babylon

    题目链接 容斥+隔板法+Lucas定理 #include <bits/stdc++.h> using namespace std; const int N=1e5+10; int n,m, ...

  10. python计算1~100的和，1~100奇数的和，1~100偶数的和，一条代码求1~100的和

    1.计算1~100的数之和----for循环实现1~100的和 sum1 = ,): sum1 = sum1 + i i += print(f"1-100之间的和是:{sum1}" ...