本文主要讲了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. GIS开源程序收集

    每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价   分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...

  2. I/O检测介绍

    I/O性能监测可总结如下:* 任何时间出现CPU等待IO,说明磁盘超载.* 计算出你的磁盘可维持的IOPS值.* 判定你的应用是属于随机磁盘访问型还是有序型.* 通过对比等待时间和服务时间即可判断磁盘 ...

  3. nginx子配置文件实例

    [root@bogon conf.d]# cat /etc/nginx/conf.d/test6.conf server { listen 8085; server_name 192.168.0.20 ...

  4. SI_WorkShop_V4安装手册

    V4安装手册 第一步 启动workshopV4 解压workshopV4.rar,在解压后的目录中双击eclipse.exe启动workshopV4,启动画面如下图所示:(注:解压后第1次启动速度会慢 ...

  5. cocos2dx[3.2](5) 屏幕适配

    1.两个分辨率 1.1.窗口分辨率 在AppDelegate.cpp中有个设置窗口分辨率的函数.该函数是设置了我们预想设备的屏幕大小,也就是应用程序窗口的大小. // glView->setFr ...

  6. 【VS开发】raw socket 的例子

    raw socket 的例子 一. 摘要    Raw Socket: 原始套接字    可以用它来发送和接收 IP 层以上的原始数据包, 如 ICMP, TCP, UDP... int sockRa ...

  7. UML（统一建模语言）包含9种图

    UML分为静态图.动态图 动态图:虚壮活血 () 静态图:租用配对累()

  8. tableau备份

    备份:数据库备份:https://help.tableau.com/current/server-linux/zh-cn/cli_maintenance_tsm.htm#tsm https://hel ...

  9. hbase 查看hfile文件

    emp表数据结构 hbase(main):098:0> scan 'emp' ROW COLUMN+CELL row1 column=mycf:depart, timestamp=1555846 ...

  10. SPOJ 703 SERVICE - Mobile Service 题解

    题面 好题啊!~ 设f[i][j][k][l]表示已经处理完前i个请求后,a在j,b在k,c在l的最小值是多少: 那么f[i][p[i]][k][l]=min(f[i][p[i]][k][l],f[i ...