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

'use strict';

const path = require('path');
const shelljs = require('shelljs');
const _ = require('lodash');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const scss = require('postcss-scss');
const postcssConfig = require('./postcss.config.js');

const hbsLoader = {
    loader: 'handlebars-loader',
    options: {
        helperDirs: [
            path.join(__dirname, '../js/common/helpers')
        ],
        partialDirs: [
            path.join(__dirname, '../../mix')
        ]
    }
};

const cssLoader = (env, type) => {
    let loaders = [{
        loader: 'css-loader',
        options: {
            url: false,
            sourceMap: env === 'dev'
        }
    }];

    if (type === 'css') {
        loaders.push({
            loader: 'postcss-loader',
            options: {
                plugins: postcssConfig.postcssPlugin(env),
                parser: scss
            }
        });
    }

    return ExtractTextPlugin.extract({
        fallback: type === 'css' ? 'style-loader' : 'vue-style-loader',
        use: loaders
    });
};

const getEntries = () => {
    const entries = {
        base: path.join(__dirname, '../scss/base.css')
    };

    // 构建各模块CSS。生成规则 */_index.css
    shelljs.ls(path.join(__dirname, '../scss/*/_index.css')).forEach((f) => {
        const dir = _.slice(f.split('/'), -2); // [modulename, _index.css]

        // 生成规则:module: './js/module/_index.css'
        if (dir[0] !== 'plugin' && dir[0] !== 'common') {
            entries[`${dir[0]}`] = path.join(__dirname, `../scss/${dir.join('/')}`);
        }
    });

    // 老的生成规则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/global.js'),
            path.join(__dirname, `../js/${dir.join('/')}`)];
    });

    return entries;
};

module.exports = (env) => {
    const libs = [
        'yoho-handlebars',
        'yoho-jquery',
        'yoho-jquery-lazyload',
        'yoho-slider',
        'yoho-jquery-pjax',
        'yoho-jquery-dotdotdot',
        path.join(__dirname, '../js/global.js')
    ];

    return {
        entry: getEntries(),
        output: {
            path: path.join(__dirname, 'bundle'), // absolute path
            filename: '[name].js'
        },
        devtool: 'hidden-source-map',
        module: {
            rules: [{
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader'
                }]
            }, {
                test: /\.css$/,
                use: cssLoader(env, 'css')
            }, {
                test: /\.hbs$/,
                use: hbsLoader
            }]
        },
        resolve: {
            modules: [
                path.join(__dirname, '../../node_modules'),
                path.join(__dirname, '../hbs'),
                path.join(__dirname, '../scss'),
                path.join(__dirname, '../js')
            ],
            alias: {
                hbs: path.join(__dirname, '../hbs'),
                mix: path.join(__dirname, '../../mix/mix'),
                jquery: 'yoho-jquery',
                'jquery-ui/widget': 'jquery-ui/ui/widget'
            }
        },
        stats: {
            children: false
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    default: false,
                    libs: {
                        test: (file) => {
                            if (libs.indexOf(file.rawRequest) >= 0) {
                                return true;
                            }

                            return false;
                        },
                        name: 'libs',
                        chunks: 'all',
                        enforce: true
                    }
                }
            }
        },
        performance: {
            maxEntrypointSize: 512000,
            maxAssetSize: 512000
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    handlebarsLoader: {}
                }
            }),
            new webpack.ProvidePlugin({
                $: 'yoho-jquery',
                jQuery: 'yoho-jquery',
                'window.jQuery': 'yoho-jquery'
            })
        ]
    };
};