随着前端技术的发展，MV*框架雨后春笋般的出现啦~同时很多前端构建工具也受到了追捧。
今天就来说一下webpack + gulp实现前端工程化的姿势吧（自我感觉这个姿势还不够好，你们有更好的姿势求告诉！）
webpack是什么？
webpack是一个模块加载器，在webpack中，所有的资源都被当作模块（js、css、图片等等）。对应不同的文件类型资源，webpack有对应的模块loader去解析他们(css就有style-loader、css-loader、less-loader)。同时也对commonjs和amd 进行了支持。
gulp是什么？
gulp是基于流的自动化构建工具。
先看一下目录结构吧
src是我们的源文件，gulpfile.js是gulp的配置文件，webpack.config.js 是webpack的配置文件。entrys是所有的js入口文件。dist 是我们的目标文件 就是最后自动生成的东东都放在这里哦。
在这里我们用webpack对我们的js进行一个解析（比如es6啊、less啊、sass啊）并打包处理。webpack的配置文件可以默认命名为webpack.config.js，我们来具体看一下配置吧
var webpack = require('webpack'),//依赖引入 fs=require('fs'); var entryPath="./src/entrys"; var outputPath="./dist"; //循环入口文件夹 读取入口文件 var entrys= fs.readdirSync(entryPath).reduce(function (o, filename) { /.js$/g.test(filename) && (o[filename.replace(/.js$/g,'')] = entryPath+'/'+filename); return o; }, {} ); //entrys['vendors']=['vue']//一些公用的vue啊 等等。 module.exports={ entry:entrys,//入口文件 output:{ publicPath:"/dist",//相应的域名哦 如 "http://localhost" path: outputPath,//目标文件夹 filename: 'oldjs/[name].js', chunkFilename: '/chunks/[hash].[name].chunk.js'//一些异步加载的会打包在这里哦 }, resolve: { extensions: ['', '.js', 'jsx','vue'],//是可以忽略的文件后缀名，比如可以直接require('Header');而不用加.js。 }, module:{ loaders: [//所依赖的模块解析器 {//es6咯 毕竟浏览器解析不了es6 所以需要解析器解析成es5 就先只用这个咯。 test: /.js$/, loader: 'babel', query: { presets: ['es2015'] } }, /*{//解析less咯 test: /.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders {//解析css 咯 test: /.css$/, loader: 'style-loader!css-loader' }, { //web字体库什么的咯 test: /.(woff|svg|eot|ttf)??.*$/, loader: 'url-loader?limit=50000'}, {//图片哈 test: /.(png|jpg)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest*/ ] }, plugins: [ // kills the compilation upon an error. // this keeps the outputed bundle **always** valid new webpack.NoErrorsPlugin(), //这个使用uglifyJs压缩你的js代码 new webpack.optimize.UglifyJsPlugin({minimize: true}), new webpack.optimize.CommonsChunkPlugin('vendors', '/js/vendors.js') ] }
这里我们定义一个简单入口文件 在src/entrys/hello.js，以及一个异步加载的js 文件 src/js/require1.js
hello.js:
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 //es6所以需要 babel加载器去解析 let仅在块级作用域内有效 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 document.onclick=function(){ //异步加载哦 也就是 require.js 会被打包成chunk****.js require.ensure(['../js/require1.js'], function(require) { var a = require("../js/require1.js"); console.log(a); }); }
require1.js:
console.log('dddd');
module.exports={
'a':'111'
}
一个html文件引用相应的js，src/html/hello.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="/dist/js/vendors.js"></script>
<script type="text/javascript" src="/dist/js/hello.js"></script>
</body>
</html>
然后我们之间执行webpack
这样就生成了一个 vendors.js 公用的js 、我们的入口 hello.js 以及一个我们异步加载的 chunk.js
接着我们就通过gulp 来实现自动化构建，他的配置可以默认放在 gulpfile.js 中，不废话上代码啦
var gulp = require('gulp'), webpack = require('webpack'), md5 = require('gulp-md5-plus'), gutil = require('gulp-util'), clean = require('gulp-clean');//清理文件 var webpack_config=require('./webpack.config.js');//得到webpack的配置 var devCompiler = webpack(webpack_config); //执行打包流 gulp.task('build',function(callback){ devCompiler.run(function(err, stats){ gutil.log("[webpack:build-js]", stats.toString({ colors: true })); callback();//执行完后执行下一个流 }); }); //将js加上10位md5,并修改html中的引用路径，该动作依赖build-js gulp.task('md5:js', ['fileinclude'], function (done) { gulp.src('dist/oldjs/**/*.js') .pipe(md5(10, 'dist/html/**/*.html')) .pipe(gulp.dest('dist/js')) .on('end', done); }); /*gulp.task('clean', ['md5:js'], function (done) { gulp.src(['dist/js']) .pipe(clean()) .on('end', done); });*/ //将html 文件放到dist中 gulp.task('fileinclude', ['build'], function (done) { gulp.src('src/html/**/*.html') .pipe(gulp.dest('dist/html')) .on('end', done); }); gulp.task('watch', function (done) { gulp.watch('src/**/*', ['build','fileinclude','md5:js']) .on('end', done); }); gulp.task('dev', ['build','watch','fileinclude','md5:js']); gulp.task('default', ['build','fileinclude','md5:js']);//生产环境 还要替换md5 等等就不搞啦~~;
代码也很清楚,就是 先获取webpack的配置，然后执行webpack命令，然后再将生成 入口js md5并替换html中的js 引用。最后 开发环境下 对src 文件夹 进行监听，一改变就重新执行一遍。
这就是我的使用姿势啦，如果有更好的姿势请告诉我哦。
相关文章：https://segmentfault.com/a/1190000003969465
http://www.jianshu.com/p/8c9c8f5649c9
项目git：https://github.com/zjb65532788/webpack_gulp
ps:每天记录一点点、每天进步一点点~~