Gulp with webpack

發表於

Gulp with webpack

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var webpack = require('gulp-webpack');

var dist = 'public';

gulp.task('default', ['webpack']);

gulp.task('webpack', function() {
    return gulp.src('app/index.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest(dist+'/js'));
});
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var webpack = require('webpack');

var dist = '/public';

module.exports = {

    watch: true,

    context: __dirname + "/app",

    entry: {
        // main script
        app: './index',
        // common scripts
        common: 'vendor/commons'
    },

    output: {
        path: __dirname + dist + "/js",
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js",
        publicPath: "js/"
    },

    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff&name=../fonts/[hash].woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream&name=../fonts/[hash].ttf" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file?name=../fonts/[hash].eot" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml&name=../fonts/[hash].svg" }
        ]
    },

    plugins: [
        new webpack.PrefetchPlugin("react"),
        new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment"),
        // new webpack.optimize.CommonsChunkPlugin("init.js"),
        new webpack.optimize.CommonsChunkPlugin("common", "common.bundle.js"),
        new webpack.ProvidePlugin({
            $: "vendor/jquery",
            jQuery: "vendor/jquery",
            // "windows.jQuery": "vendor/jquery",
            // "window.React": "react",
            React: "react",
            Backbone: "backbone"
        })
    ],

    resolve: {
        alias: {
            components: __dirname + '/app/components',
            actions: __dirname + '/app/actions',
            stores: __dirname + '/app/stores',
            contracts: __dirname + '/app/contracts',
            lib: __dirname + '/app/lib',
            app: __dirname + '/app',
            modules: __dirname + '/app/modules',
            vendor: __dirname + '/app/vendor',
            node_modules: __dirname + '/node_modules',
            jquery: __dirname + '/app/vendor/jquery'
        }
    }

};