基于 gulp + webpack 的前端构建

[cobish]

前言

在「基于 gulp 的前端构建」中，我尝试使用 gulp 来构建前端项目，其中]使用 requirejs 来做模块加载器。但由于 requirejs 的路径问题使得打包起来有点麻烦，再加上它的 amd 写法引入有点不优雅，于是尝试使用 webpack 替代 requirejs，webpack 支持 amd、commonJS 甚至 ES6 写法，其中如果你经常编写 Grunt 或 gulp 就一定对 commonJS 不陌生。

接下来的内容跟之前用 gulp 构建的思路大致相同，其中只是将 requirejs 打包替换成了 webpack 打包。变化比较多的就是命令增多了，原因接下来会说到。

gulp & webpack 目录

添加了两个关于 webpack 的文件，一个用于开发阶段，一个用于打包上线阶段。

└─ gulp/                                 # gulp配置目录
    ├─ tasks                             # 任务配置目录
        ├─ image.js                      # 图片配置
        ├─ other.js                      # 其它配置
        ├─ script.js                     # 脚本配置
        ├─ style.js                      # 样式配置
        └─ view.js                       # 页面配置
    ├─ gulp.config.js                    # gulp配置文件
    ├─ webpack.config.js                 # webpack开发配置文件
    └─ webpack.production.config.js      # webpack上线配置文件

开发阶段

参考：「gulp + webpack 构建多页面前端项目」。

这里增加了几条命令，其中不自动刷新浏览器的命令和自动刷新浏览器的命令各有两套。有的人喜欢改动文件后自己手动刷新浏览器，而有的人则喜欢浏览器根据文件改动自动刷新，这里都有。

不自动刷新浏览器的命令

gulp watch

输入 gulp watch 便会生成可运行的代码，但是只要其中一个 js 文件改变 webpack 都会把全部的 js 文件都重新编译一遍，如果 js 文件数量很多的话，那等待的时间也会有点久。

gulp dev & gulp webpack

需注意的是，得按照先后顺序先运行 gulp dev，然后再运行 gulp webpack。原因是 gulp dev 里包含了删除 dist 目录的所有代码。

这里因为 gulp 的监听与 webpack 的监听会起冲突，所以需要打开两个 console。gulp dev 监听 html 和 css 文件的改动，gulp webpack 监听 js 文件的改动。这样解决了上一条命令中的性能问题，它只会去编译修改过的 js 文件而不是全部。但是由于它需要打开两个 console，所以如果 js 文件数量不是很多的话可以考虑用 gulp watch。

效果图如下：

自动刷新浏览器的命令

gulp browser

包含了 gulp dev 的功能，然后会自动打开 127.0.0.1:3000 ，并监听文件的改动自动刷新浏览器。

gulp serve & gulp webpack

需注意的是，得按照先后顺序先运行 gulp serve，然后再运行 gulp webpack。

包含了 gulp dev & gulp webpack 的功能，并自动刷新浏览器。

上线阶段

输入 gulp build 命令后最终生成的代码依然在 dist 目录下，也就是说在开发阶段与上线打包阶段构建生成的代码都在同一个目录下，只不过在开发阶段代码是未进行合并压缩，上线打包阶段代码是经过合并压缩打上 hash 戳的。

其中 webpack.production.config.js 跟开发阶段的 webpack.config.js 有些区别，主要是不包含了 sourcemap，还有把 js 代码压缩了。

gulp.task('webpack:build', plugins.shell.task([
    'webpack --process --colors --config gulp/webpack.production.config.js'
]));