此配置将使用webpack用于辅助开发与code split,用gulp用于发布管理来实现整体的多入口的前端开发设计。
所有开发源代码将在/src
中,具体的目录结构可以根据实际情况自行调整。
所有源代码
所有图片资源。
所有入口页面对应入口js文件,即主要业务js。该文件夹下的js会自动扫描后,被自动注入到对应名称的html页面中。需要注意的是,文件名不能重复。
所有公共模块js。该文件夹的所有文件会自动扫描,合并成common.js
注入所有页面中。
第三方插件。其中全站用到的插件会被打包成vender
,需要手动在配置文件中配置。
其中jquery
这样全站用到的可以直接require("jquery")
使用。需要懒加载的,需要用require.ensure
。
如果直接通过require(path)
引入没有打包的第三方文件,则该文件会直接被打包到该页面的入口文件中去。
样式文件
页面模板文件。
由于gulp实现公用模板的情况,需要先gulp编译一次,即从template编译到views中。
该配置要实现的要求将以下列出(其中划线划掉的表示没有实现的,若以实现则会有相关的使用说明)。
所有页面模板放到views
中,如果该页面有入口js文件,则需要按照对应的目录结构在js中创建对应的js文件。
在vender: ["jquery"]
中手动增加依赖的全站第三方文件。
需要注意的是,最好在alias
配种别名,这样可以在业务js中,直接var $ = require('jquery')
使用。
只需要写在module文件夹即可。模块的话则可以直接写成module.exports
形式,在使用的时候通过require(路径)
即可使用。
采取组件依赖到主js中,然后插入到页面中。
使用gulp的fileinclude来依赖共同组件。 语法:‘@@include('common/header.html')’。
必须要兼容!!!必须要使用webpack1.13.0版本,否则再高版本会发生压缩错误。
通过require.ensure
来懒加载。
首先使用scss进行语言预编译,因此全部文件在scss中,并通过postcss进行一些功能性处理,比如前缀补全等。
scss/base
内存放基础样式,亦可存放共同业务样式,到时候可以根据实际情况配置。打包后将生成base.css。
scss
内其他文件则是业务样式,将会根据页面名称自己生成页面样式并插入。
此处的一个bug是,样式注入到页面时,页面会注入与base同名的js文件,暂没有解决。准备在之后用gulp
删除掉。
图片小于8k自动转为base64。因为打包路径的问题,建议启动一个http-server服务器来访问。
由gulp来实现,现在存一个bug,需要保存第二次才在刷新后看到最新结果。
因为要实现兼容ie8, 所以webpack的版本要求1.x版本,jQuery要求1.11.X版本(还因为自身modele的实现方式不能使用1.9.x)