webpack.base.config.js 4.71 KB
/**
 * webpack config
 * @author: shenzm<zhimin.shen@yoho.cn>
 * @date: 2017/3/21
 */

'use strict';
const _ = require('lodash');
const os = require('os');
const path = require('path');
const scss = require('postcss-scss');
const shelljs = require('shelljs');
const webpack = require('webpack');
const HappyPack = require('happypack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssConfig = require('./postcss.config.js');
const entries = {
    index: path.join(__dirname, '../scss/index.css'),
    common: path.join(__dirname, '../scss/common.css'),
    feature: path.join(__dirname, '../scss/feature.css')
};
const happyThreadPool = HappyPack.ThreadPool({ // eslint-disable-line
    size: os.cpus().length
});

// 构建各模块子页面JS。生成规则module.page.js
shelljs.ls(path.join(__dirname, '../js/**/*.page.js')).forEach((f) => {
    const dir = _.slice(f.split('/'), -2); // [modulename, xx.page.js]

    // Important
    // 生成规则:module.page: './js/module/xx.page.js'
    entries[`${dir[0]}.${dir[1].match(/(.*).page.js/)[1]}`] = path.join(__dirname, `../js/${dir.join('/')}`);
    entries.libs = [
        'yoho-jquery'
    ];
});

module.exports = (env) => {
    return {
        entry: entries,
        output: {
            path: path.join(__dirname, 'bundle'), // absolute path
            filename: '[name].js'
        },
        module: {
            rules: [{
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                    options: {
                        postcss: {
                            plugins: postcssConfig.postcssPlugin(env),
                            parser: scss
                        },
                        autoprefixer: false,
                        loaders: {
                            css: ExtractTextPlugin.extract({
                                fallback: 'vue-style-loader',
                                use: [{
                                    loader: 'css-loader',
                                    options: {
                                        url: false
                                    }
                                }]
                            })
                        }
                    }
                }],
            }, {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'happypack/loader?id=js'
                }]
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader',
                        options: {
                            url: false
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: postcssConfig.postcssPlugin(env),
                            parser: scss
                        }
                    }],
                })
            }, {
                test: /\.hbs$/,
                use: [{
                    loader: 'happypack/loader?id=hbs',
                }]
            }]
        },
        resolve: {
            modules: [
                path.join(__dirname, '../../node_modules'),
                path.join(__dirname, '../vue'),
                path.join(__dirname, '../hbs'),
                path.join(__dirname, '../scss'),
                path.join(__dirname, '../js')
            ],
            alias: {
                vue: 'vue/dist/vue.js'
            }
        },
        stats: {
            children: false
        },
        plugins: [
            new HappyPack({
                id: 'js',
                threadPool: happyThreadPool,
                loaders: ['babel-loader'],
            }),
            new HappyPack({
                id: 'hbs',
                threadPool: happyThreadPool,
                loaders: [{
                    loader: 'handlebars-loader',
                    options: {
                        helperDirs: [
                            path.join(__dirname, '../js/common/helpers')
                        ],
                        partialDirs: [
                            path.join(__dirname, '../../doraemon/views/partial')
                        ]
                    }
                }]
            }),
            new ExtractTextPlugin('[name].css'),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'libs',
                filename: 'libs.js'
            }),
            new webpack.ProvidePlugin({
                $: 'yoho-jquery',
                jQuery: 'yoho-jquery',
                'window.jQuery': 'yoho-jquery'
            })
        ]
    };
};