本文主要讲了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. Centos Linux release 7.2.15ll (core) yum 安装java环境

    系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) #安装之前先查看一下有无系统 ...

  2. pycharm修改代码后第一次运行不生效解决

    问题: 用pycharm每次修改代码后第一次运行还是原来的结果,运行第二次的时候才是修改后代码的结果 解决: 每次修改代码后保存一下即可解决

  3. Linux配置全局jdk以及Tomcat服务器简单测试

    Linux配置全局jdk 1.确保相应文件夹下有apache-tomcat和jdk的压缩文件 注意:jdk文件必须为适应Linux版本的文件 (如果已经有了相应文件,可以跳过以下第2-3个步骤) 2. ...

  4. jeecms v9图标不显示问题

  5. java：Mybatis框架2（基于mapper接口的开发，多种查询，复合类型查询，resultMap定义，多表联查，sql片段）

    1.mybatis02: mybatis-config.xml: <?xml version="1.0" encoding="UTF-8"?> &l ...

  6. 【JAVA系列】Google爬虫如何抓取JavaScript的？

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]Google爬虫如何抓取Java ...

  7. Unity2D RPG游戏开发日志

    一.游戏构建设计 场景设计:地面的每一层用unity的TiledMap来设计,首先第一层为地面层,也就是地形的大部分区域的图块:第二层为覆盖层,如图中蓝色线圈起来的柱子的上半部分,由于玩家可以在柱子背 ...

  8. nginx配置laravel项目

    在/etc/nginx/conf.d下新建一个laravel.conf文件,并编辑 写入如下文件即可 server { listen 80; server_name xxx; root "/ ...

  9. SSM的开发步骤分析

    完整开发步骤 导包 spring的jar包 mybatis的jar包 mybatis-Spring的jar包 aop的依赖jar包 oracle等数据库连接的jar包 DataSource的jar包 ...

  10. Logistic回归实战篇之预测病马死亡率

    利用sklearn.linear_model.LogisticRegression训练和测试算法. 示例代码: import numpy as np import matplotlib.pyplot ...