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

'use strict';

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

const happyThreadPool = HappyPack.ThreadPool({ // eslint-disable-line
    size: os.cpus().length
});


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

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

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

const getEntries = () => {
    const entries = {
        libs: ['jquery', path.join(__dirname, '../public/js/global.js')],
        common: path.join(__dirname, '../public/scss/common.css'),
    };

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

        // Important
        // 生成规则:module.page: './js/module/page/index.js'
        entries[`${dir[0]}.${dir[1]}`] = path.join(__dirname, `../public/js/${dir.join('/')}`);
    });

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

    return entries;
};

module.exports = (env) => {
    return {
        entry: getEntries(),
        output: {
            path: path.join(__dirname, '../public/bundle'), // absolute path
            filename: 'js/[name].js'
        },
        module: {
            rules: [{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            }, {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'happypack/loader?id=js'
                }]
            },
            {
                test: /\.(woff2?|svg|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: env === 'pro' ? '../fonts/[name].[ext]' : 'fonts/[name].[ext]'
                }
            }, {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader'
                },
                {
                    loader: 'iview-loader',
                    options: {
                        prefix: false
                    }
                }]
            }, {
                test: /\.css$/,
                use: cssLoader(env, 'css')
            }]
        },
        resolve: {
            modules: [
                path.join(__dirname, '../node_modules'),
                path.join(__dirname, '../public/scss'),
                path.join(__dirname, '../public/js'),
                path.join(__dirname, '../public/vue')
            ],
            alias:{
                'vue$':'vue/dist/vue.esm.js',
                'vue@': path.join(__dirname, '../public/vue')
            },
            extensions: ['.js', '.json', '.vue']
        },
        stats: {
            children: false
        },
        plugins: [
            new ExtractTextPlugin('css/[name].css'),
            new HappyPack({
                id: 'js',
                threadPool: happyThreadPool,
                loaders: ['babel-loader'],
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'libs',
                filename: 'libs.js'
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                moment: 'moment'
            }),
            // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        ]
    };
};