本文主要讲了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. loadrunner设置Analysis分析时去掉思考时间

    在进行对loadrunner进行执行脚本的情况下,那么就需要在脚本中进行添加为思考时间,这样才更符合人为的脚本时间,那么在进行执行压力的过程中,思考时间是需要开启的,完成之后为了便于分析那么就需要把思 ...

  2. iOS 图表工具charts之BarChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  3. iOS 图表工具charts介绍

    charts是一个很好的绘图工具,功能非常强大,可以用来绘制折线,柱状图,饼状图,k线图,k线分时图,雷达图,气泡图等等,charts是一款仿照安卓 MPAndroidChart而来的一个基于swif ...

  4. 微信小程序的配置详解

    1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...

  5. git 新建项目的一些操作

    Command line instructions Git global setup git config --global user.name "Administrator" g ...

  6. yum升级python

    一,查看系统默认版本 [root@redhat7 ~]# python -VPython 2.7.5 二,安装依赖包 yum install epel-release -y 三,查看新版本 yum s ...

  7. ELK+Kafka

    kafka:接收java程序投递的消息的日志队列 logstash:日志解析,格式化数据为json并输出到es中 elasticsearch:实时搜索搜索引擎,存储数据 kibana:基于es的数据可 ...

  8. 2D轮播图

    目录结构 index.html <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  9. sklearn.preprocessing.StandardScaler数据标准化

    原文链接:https://blog.csdn.net/weixin_39175124/article/details/79463993 数据在前处理的时候,经常会涉及到数据标准化.将现有的数据通过某种 ...

  10. Java基础/Java异常

    Java异常 1.异常的分类: ① 非运行时异常(Checked Exception) Java中凡是继承自Exception但不是继承自RuntimeException的类都是非运行时异常 ② 运行 ...