构建工具的选择

[nimoc]

构建项目中的 js 文件最优秀的是 webpack。webpack-book

开源项目还可以选用 rollup

1. webpack 热更新最快的方式是单独启动一个服务器加上 webpack-hot-middleware
2. 项目中有多个入口，即多个单页引用。同时需要支持热更新。可通过开发时单个入口dev.js最终构建时配置多个入口]的方式解决。
3. 如果要兼容IE8请参考 support-ie8

---

fis3 构建非JS文件非常优秀，关键是它对于文件指纹做的非常好。但是也还是有些小问题，不过都能自己动手解决。

资源定位中md5戳的计算过程

1、 fis3 livereload 有时会报错，并且不支持 css 热更新（编译css后不刷新页面更新样式）。 可以自己增加 livereload 解决

2、 资源定位的时候对 a 及 iframe 是否支持

3、 JS方面的编译全部交给 webpack。fis3不编译 js 时会遇到开发阶段 js 被 release:false 禁用后无法引用的问题。利用 jdists区分开发编译和发布编译，利用 document.createElement 防止 release:false 导致的报错。

当 js 文件被 release:false 后直接引用 <script src="/dev.js" ></script>

<!--jdists trigger="dev" >
    <script>
!(function(){
    var devjsNode = document.createElement('scr'+'ipt')
    devjsNode.setAttribute('src', '/dev.js')
    document.body.append(devjsNode)
})()
    </script>
</jdists-->
<!--jdists trigger="online" >
    <script src="./externals-entry.js" ></script>
    <script src="./entry.js" ></script>
</jdists-->

4、 @import "/path/some.less"; 这种绝对路径的语法不要用，因为只在 fis3 中有效，其他 webpack less-loader 不支持。

---

gulp 用户最多的构建系统，非常优秀。在文件指纹问题上没有 fis3 做的优秀，因为文件指纹还是建议使用 fis3。

gulp 入门指南，这本书是作者多年前写的，但是作者现在还是选择用 fis3。

---

grunt 已经停止维护了，而且他的构建方式不能满足复杂的构建需求。不要去了解，更不用学习如何使用。