Skip to content

yehuajin/webpack-demo

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

多页面webpack+gulp项目

此配置将使用webpack用于辅助开发与code split,用gulp用于发布管理来实现整体的多入口的前端开发设计。


目录说明

所有开发源代码将在/src中,具体的目录结构可以根据实际情况自行调整。

lib

所有源代码

images

所有图片资源。

js

所有入口页面对应入口js文件,即主要业务js。该文件夹下的js会自动扫描后,被自动注入到对应名称的html页面中。需要注意的是,文件名不能重复。

module

所有公共模块js。该文件夹的所有文件会自动扫描,合并成common.js注入所有页面中。

plugins

第三方插件。其中全站用到的插件会被打包成vender,需要手动在配置文件中配置。

其中jquery这样全站用到的可以直接require("jquery")使用。需要懒加载的,需要用require.ensure

如果直接通过require(path)引入没有打包的第三方文件,则该文件会直接被打包到该页面的入口文件中去。

scss

样式文件

template

页面模板文件。

views

由于gulp实现公用模板的情况,需要先gulp编译一次,即从template编译到views中。


实现要求

该配置要实现的要求将以下列出(其中划线划掉的表示没有实现的,若以实现则会有相关的使用说明)。

1. 多页面应用,多个对应入口

所有页面模板放到views中,如果该页面有入口js文件,则需要按照对应的目录结构在js中创建对应的js文件。

2. 第三方库依赖共同打包

vender: ["jquery"]中手动增加依赖的全站第三方文件。

需要注意的是,最好在alias配种别名,这样可以在业务js中,直接var $ = require('jquery')使用。

3. 公用组件打包

只需要写在module文件夹即可。模块的话则可以直接写成module.exports形式,在使用的时候通过require(路径)即可使用。

4. 组件化开发

采取组件依赖到主js中,然后插入到页面中。

5. 公用基础模板

使用gulp的fileinclude来依赖共同组件。 语法:‘@@include('common/header.html')’。

6. 兼容ie8

必须要兼容!!!必须要使用webpack1.13.0版本,否则再高版本会发生压缩错误。

7. 懒加载第三方资源

通过require.ensure来懒加载。

8. 预编译css语言

首先使用scss进行语言预编译,因此全部文件在scss中,并通过postcss进行一些功能性处理,比如前缀补全等。 scss/base内存放基础样式,亦可存放共同业务样式,到时候可以根据实际情况配置。打包后将生成base.css。

scss内其他文件则是业务样式,将会根据页面名称自己生成页面样式并插入。

此处的一个bug是,样式注入到页面时,页面会注入与base同名的js文件,暂没有解决。准备在之后用gulp删除掉。

9. 语法校验

10. 图片优化压缩sprite

图片小于8k自动转为base64。因为打包路径的问题,建议启动一个http-server服务器来访问。

11. 开发环境与生存环境的切换与发布

12. 静态资源的自动发布

13. 开发过程自动编译与刷新

由gulp来实现,现在存一个bug,需要保存第二次才在刷新后看到最新结果。


注意

因为要实现兼容ie8, 所以webpack的版本要求1.x版本,jQuery要求1.11.X版本(还因为自身modele的实现方式不能使用1.9.x)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 85.1%
  • HTML 10.9%
  • CSS 4.0%