关于前端构建工具的疑惑

Question

这边几个小项目都是用的webpack，之前用的是gulp，gulp应该是偏向自动化，webpack偏向打包吧，但是自己不是很清楚构建流程，请指教一下，还有就是目录结构

Answer 1

其实不冲突，可以用gulp来控制webpack，当然也可以独立webpack.config.js，然后gulp来引入，如下：

var gulp = require('gulp'),
    webpack = require("webpack"),
    path = require("path");

gulp.task('webpack',function(){
    webpack({
        entry: "./app/app.js",
        output: {
            path: __dirname,
            filename: "bundle.js"
        },
        module: {
            loaders: [
                { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
                { test: /\.css$/, loader: 'style-loader!css' },
                //{ test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
                {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            ]
        },
        resolve:{
            extensions:['','.js','.json','.css']
        }
    },function(err,stats){
        console.log(err);
    })
});

你可以先构建，执行成功后，或许会有更多感悟。
目录结构可以根据项目结构划分。
这个在网上资料也多，可以多参考。