gulp+webpack多页应用开发，webpack仅处理打包js

项目背景：一个综合网站，开发模式为后端嵌套数据，前端开发静态页面和部分组件。

问题：gulp任务处理自动刷新、sass编译等都是极好的。但是对于js的处理并不是很好，尤其是项目需要开发组件时候，如评论组件，需要有模版、css、js[各个模块]。这时候选择用gulp感觉并不合适，当然可以选择require.js or seajs等AMD/CMD规范来开发，但是想想项目中的组件应该是独立于项目之外的，不依赖于任何第三方js，因此选择去折腾webpack+gulp来搞。几番折腾、百度之后，配置如下：

package.js

{
  "name": "work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "autoprefixer-core": "^6.0.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.13.0",
    "cssgrace": "^3.0.0",
    "cssnext": "^1.8.4",
    "del": "^2.2.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "fs": "^0.0.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.1",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.8",
    "gulp-webpack": "^1.5.0",
    "imagemin-jpegtran": "^5.0.2",
    "imagemin-pngcrush": "^5.0.0",
    "jshint": "^2.9.2",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.2",
    "path": "^0.12.7",
    "run-sequence": "^1.2.1",
    "through2": "^2.0.1",
    "webpack": "^2.4.1"
  }
}

package中有部分插件并未使用，自行选择安装。

gulp配置[gulpfile.js]，关于gulp使用请参考这篇文章

 var gulp = require("gulp")
             , gutil = require("gulp-util")

             , del = require("del")
             , sass = require("gulp-sass")
             , uglify = require('gulp-uglify')
             , rename = require("gulp-rename")

             , browserSync = require("browser-sync").create()
             , reload = browserSync.reload

             , sequence = require("run-sequence")
             , plumber = require("gulp-plumber")
             , watch = require("gulp-watch")

             , through2 = require("through2")
             , path = require("path")
             , fs = require("fs")
             , minifycss = require('gulp-minify-css')
             , postcss = require('gulp-postcss')
             , autoprefixer = require('autoprefixer') // Autoprefixer 为CSS补全浏览器前缀
             , cssnext  = require('cssnext') // CSSNext 用下一代CSS书写方式兼容现在浏览器
             , cssgrace  = require('cssgrace') // CSS Grace 让CSS兼容旧版IE
             , webpack = require('webpack');

 // #############################################
 // # init params
 // 收集参数
 var cwd = process.cwd();
 var cmdargs = process.argv.slice(2);
 var cmdname = cmdargs.shift();
 var cmdopts = {};
 var srcpath = "./src";
 var distpath = "./dist";

 while (cmdargs.length) {
     var key = cmdargs.shift().slice(2);
     var val = cmdargs.shift();
     cmdopts[key] = key === "src" || key === "dist" ? normalizePath(val) : val;
 }

 // 参数配置
 var release = cmdname === "release";
 var reloadTimer = null;
 var devport = 5678;
 var paths = {
     src: path.join(__dirname, srcpath),
     dist: path.join(__dirname, distpath)
 }

 function normalizePath(url) {
     if (url.charAt(0) === "/" || url.indexOf(":") > -1) {
         return path.normalize(url);
     }
     return path.normalize(path.join(cwd, url));
 }

 function setOptions(cmd, cmdopts) {
     if (cmd === "start") {
         paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
     } else if (cmd === "release") {
         paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
         paths.dist = cmdopts.dist ? cmdopts.dist : path.normalize(paths.src + "/../" + distpath);
     }
 }

 function showUsage() {
     console.log("Usage:\n");
     console.log("     gulp                   显示帮助");
     console.log("     gulp help              显示帮助");
     console.log("     gulp start --src src   在--src目录下自动化开发调试环境");
     console.log("     gulp release --src src --dist dist 构建--src线上版本到--dist目录\n");
     console.log("     gulp start --src src --proxy localhost   使用gulp代理localhost请求，并且实时监听src文件修改");
 }

 // #############################################
 // # default tasks

 // # clean path
 gulp.task("clean:dist", function() {
     return del([paths.dist], {
         force: true
     });
 });

 // # 编译css
 gulp.task("sass", function() {
     var base = paths.src;
     var dest = base;
     var processors = [
         autoprefixer({
             browsers: ['last 3 version', '> 5%', 'Android >= 4.0', 'iOS >= 7'],
             cascade: false, //是否美化属性值 默认：true 像这样：
             remove: true //是否去掉不必要的前缀 默认：true
         }),
         // cssnext(),
         // cssgrace
     ];
     return gulp.src(base + "/**/*.scss", {
             base: base
         })
         .pipe(plumber())
         .pipe(sass({
                 precision: 2,
                 outputStyle: release ? "compressed" : "expanded"
                     //sourceComments: release ? false : true
             })
             .on("error", sass.logError))
         .pipe(postcss(processors))
         .pipe(gulp.dest(dest));
 });
 // 编译单个css
 function parseSingleFile(file) {
     var base = paths.src;
     var dest = base;
     var processors = [
         autoprefixer({
             browsers: ['last 3 version', '> 5%', 'Android >= 4.0', 'iOS >= 7'],
             cascade: false, //是否美化属性值 默认：true 像这样：
             remove: true //是否去掉不必要的前缀 默认：true
         }),
         // cssnext(),
         // cssgrace
     ];
     return gulp.src(file, {
             base: base
         })
         .pipe(plumber())
         .pipe(sass({
                 precision: 2,
                 outputStyle: release ? "compressed" : "expanded"
                     //sourceComments: release ? false : true
             })
             .on("error", sass.logError))
         .pipe(postcss(processors))
         .pipe(gulp.dest(dest));
 }

 // # 压缩js
 gulp.task("uglify", function() {
     var base = paths.src;
     var dest = paths.dist;
     return gulp.src([
             base + "/**/*.js",
             "!" + base +"/**/*-component/**",
             "!" + base + "/**/*min.js" // 排除压缩min.js文件
         ], {
             base: base
         })
         .pipe(plumber())
         .pipe(uglify())
         .pipe(gulp.dest(dest));
 });

 // # 调用webpack处理component
 function parseComponentToWebpack(path){
     var webpackConfig = require('./webpack.config.js');
     // 灵活处理output位置，将js文件生成在component同级目录
     // 将**/*-component/xx.js路径替换为**
     // var outputPath = path.replace(/\/[^\/]+\/[^\/]+$/,'');
     var outputPath = path.replace(/\/([^\/]+)-component\/[^\/]+$/,'');
     var filename = RegExp.$1;
     webpackConfig.entry = {};
     webpackConfig.entry[filename] = path+'/../index.js';
     // windows上webpack不认识D:/xxx路径，替换为D:\\xxx路径
     outputPath = outputPath.replace('/','\\\\');
     webpackConfig.output.path = outputPath;
     return webpack(webpackConfig, function(err, stats) {
         console.log(stats.toString());
     });
 }

 // # 压缩css
 gulp.task("mincss", function() {
     var base = paths.src;
     var dest = paths.dist;
     gulp.src(dest + '/**/*.css')
         .pipe(minifycss())
         .on('error', function(e) {
             console.log(e)
         })
         .pipe(gulp.dest(dest));
 });

 // # 复制静态资源
 gulp.task("copy:dist", function() {
     var base = paths.src;
     var dest = paths.dist;
     // 复制min.js文件
     gulp.src([
             base + "/**/*min.js"
         ], {
             base: base
         })
         .pipe(gulp.dest(dest));
     return gulp.src([
             base + "/**/*",
             "!" + base +"/**/*-component",
             "!" + base +"/**/*-component/**",
             "!" + base + "/**/*.js",
             "!" + base + "/**/*.scss"
         ], {
             base: base
         })
         .pipe(gulp.dest(dest));
 });

 // # serv & watch
 gulp.task("server", function() {
     // start server
     browserSync.init({
         ui: false,
         notify: false,
         port: devport,
         // 设置代理请求
         proxy: cmdopts.proxy,
         server: !cmdopts.proxy ? {
             baseDir: paths.src
         } : false
     });

     // # watch src资源, 调用相关任务预处理
     // # 刷新浏览器
     // # 限制浏览器刷新频率
     watch(paths.src + "/**/*", function(obj) {
         var url = obj.path.replace(/\\/g, "/");
         var absurl = url;
         url = path.relative(paths.src, url).replace(/\\/g, "/");
         console.log("[KS] " + absurl);

         // skip scss & css
         if (!/\.scss$/.test(url) && !/\.css$/.test(url)) {
             if (/.+-component\/.+\.js$/.test(url)) {
                 // 评论组件，调用webpack
                 console.log("[webpack] "+absurl);
                 parseComponentToWebpack(absurl);
                 return;
             }
             if (reloadTimer) {
                 clearTimeout(reloadTimer);
             }
             reloadTimer = setTimeout(reload, 1000);
         }else if(/\.scss$/.test(url)){
             // sass任务
             parseSingleFile(absurl)
             // 无刷新加载css
             .pipe(reload({
                 stream: true
             }));
             // sequence("sass");
         }
     });
 });

 // #############################################
 // # public task

 gulp.task("default", showUsage);
 gulp.task("help", showUsage);

 gulp.task("start", function(cb) {
     release = false;
     setOptions("start", cmdopts);
     sequence("sass", "server", cb);
 });

 gulp.task("release", function(cb) {
     release = true;
     setOptions("release", cmdopts);
     sequence("clean:dist", "copy:dist", ["mincss", "uglify"], cb);
 });

webpack配置(webpack.config.js)，webpack配置参考

 var webpack = require('webpack');

 module.exports = {
     // devtool: 'eval-source-map',
     devtool: false,
     entry: {
         "component-comment": __dirname + "/src/assets/comment/component/index.js"
     },
     output: {
         // path: __dirname + "/src/assets/comment",
         path: __dirname + "/dist/component",
         filename: "[name].js"
     },

     module: {
         rules: [{
                 test: /\.json$/,
                 loader: "json-loader"
             },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader', //在webpack的module部分的loaders里进行配置即可
                 /*query: {
                     presets: ['es2015']
                 }*/
                 query: {
                     presets: [
                         ['es2015', {
                             'modules': false //babel不编译es6的模块加载，让webpack支持Tree-shaking
                         }]
                     ]
                 }
             },
         ]
     },

 }

以上配置webpack将单独处理component目录中的js文件，并在component同级目录生成文件夹相同名字的js文件(如：'./component-comment-component/' 文件夹对应的js文件为 './component-comment.js')。

以下是我的文件结构

 src
     app
         *.html                                    //html目录
     assets                                        //静态资源目录
         component-comment-component               //评论组件
             images                                //评论组件所用图片
             component                             //组件模块
                 common.js                         //公用方法，如ajax、jsonp、extend等方法
                 defaultConfig.js                  //默认配置
                 emoticon.js                       //表情模块，如获取服务端表情资源，渲染表情等
                 index.js                          //主模块，如获取评论、发表评论、点赞、回复、举报等
                 selector.js                       //选择器方法，模拟jQuery封装
                 template.js                       //模版
             component-comment.js              //webpack编译component目录的js
             component-comment.scss            //评论样式表
             component-comment.css             //编译的sass文件
         css                                        //项目其他sass|css资源
         images                                     //项目图片文件
         js                                         //项目的其他js

以上只是一个简单的使用案例，针对不同结构需要作出不同调整。