webpack.base.config.js 3.89 KB
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const shelljs = require('shelljs');
const _ = require('lodash');
const HappyPack = require('happypack');
const os = require('os');

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

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

const getEntries = () => {
    const entries = {
        libs: [
            'jquery',
            'yoho-qs',
            'yoho-cookie',
            'yoho-store',
            'vue',
            'vue-lazyload',
            'vue-swipe',
            'vue-infinite-scroll',
            'vue-touch',
            'fastclick',
            path.join(__dirname, '../js/global.js'),
            path.join(__dirname, '../js/index.js')
        ],
        index: path.join(__dirname, '../scss/index.css')
    };

    // 老的生成规则module.page.js
    shelljs.ls(path.join(__dirname, '../js/**/*.page.js')).forEach((f) => {
        const dir = _.slice(f.split('/'), -2); // [modulename, xx.page.js]

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

    return entries;
};

module.exports = {
    entry: getEntries(),
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                        use: [
                            { loader: 'css-loader', options: { url: false, sourceMap: false} },
                            { loader: 'postcss-loader', options: { sourceMap: true} }
                        ],
                        fallback: 'vue-style-loader'
                    })
                }
            }
        }, {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'happypack/loader?id=js'
            }
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { url: false, sourceMap: false} },
                    { loader: 'postcss-loader', options: { sourceMap: true} }
                ]
            })
        }, {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: ['file-loader?name=img/[hash].[ext]']
        }, {
            test: /\.hbs$/,
            use: [{
                loader: 'happypack/loader?id=hbs'
            }]
        }]
    },
    plugins: [
        new HappyPack({
            id: 'js',
            threadPool: happyThreadPool,
            loaders: ['babel-loader'],
        }),
        new HappyPack({
            id: 'hbs',
            threadPool: happyThreadPool,
            loaders: [hbsLoader]
        }),
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: 'libs'
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
        extensions: ['.js', '.json', '.css', '.scss', 'vue'],
        modules: [
            path.join(__dirname, '../../node_modules'),
            path.join(__dirname, '../vue'),
            path.join(__dirname, '../hbs'),
            path.join(__dirname, '../scss'),
            path.join(__dirname, '../js'),
        ],
    }
};