lavas-core-vue/dist/webpack.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _webpack = require('webpack');

var _webpack2 = _interopRequireDefault(_webpack);

var _webpackChain = require('webpack-chain');

var _webpackChain2 = _interopRequireDefault(_webpackChain);

var _path = require('path');

var _chalk = require('chalk');

var _chalk2 = _interopRequireDefault(_chalk);

var _webpackNodeExternals = require('webpack-node-externals');

var _webpackNodeExternals2 = _interopRequireDefault(_webpackNodeExternals);

var _extractTextWebpackPlugin = require('extract-text-webpack-plugin');

var _extractTextWebpackPlugin2 = _interopRequireDefault(_extractTextWebpackPlugin);

var _friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

var _friendlyErrorsWebpackPlugin2 = _interopRequireDefault(_friendlyErrorsWebpackPlugin);

var _optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

var _optimizeCssAssetsWebpackPlugin2 = _interopRequireDefault(_optimizeCssAssetsWebpackPlugin);

var _copyWebpackPlugin = require('copy-webpack-plugin');

var _copyWebpackPlugin2 = _interopRequireDefault(_copyWebpackPlugin);

var _serverPlugin = require('vue-server-renderer/server-plugin');

var _serverPlugin2 = _interopRequireDefault(_serverPlugin);

var _webpackBundleAnalyzer = require('webpack-bundle-analyzer');

var _swRegisterWebpackPlugin = require('sw-register-webpack-plugin');

var _swRegisterWebpackPlugin2 = _interopRequireDefault(_swRegisterWebpackPlugin);

var _progressBarWebpackPlugin = require('progress-bar-webpack-plugin');

var _progressBarWebpackPlugin2 = _interopRequireDefault(_progressBarWebpackPlugin);

var _timefixWebpackPlugin = require('./plugins/timefix-webpack-plugin');

var _timefixWebpackPlugin2 = _interopRequireDefault(_timefixWebpackPlugin);

var _uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

var _uglifyjsWebpackPlugin2 = _interopRequireDefault(_uglifyjsWebpackPlugin);

var _loader = require('./utils/loader');

var _path2 = require('./utils/path');

var _workbox = require('./utils/workbox');

var _constants = require('./constants');

var _fs = require('fs');

var _fs2 = _interopRequireDefault(_fs);

var _gracefulFs = require('graceful-fs');

var _gracefulFs2 = _interopRequireDefault(_gracefulFs);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// solve 'too many open files' problem on Windows
// see https://github.com/webpack-contrib/copy-webpack-plugin/issues/59
_gracefulFs2.default.gracefulify(_fs2.default); /**
                                                 * @file webpack base config
                                                 * @author *__ author __*{% if: *__ email __* %}(*__ email __*){% /if %}
                                                 */

class WebpackConfig {
    constructor(config = {}, env) {
        this.config = config;
        this.env = env;
        this.isProd = this.env === 'production';
        this.isDev = this.env === 'development';
    }

    addStyleRules(config, options) {
        (0, _loader.styleLoaders)(options).forEach(({ name, use, test }) => {
            let currentStyleRule = config.module.rule(`style-${name}`).test(test);

            use.forEach(loader => {
                if (typeof loader === 'string') {
                    currentStyleRule.use(loader).loader(loader);
                } else {
                    currentStyleRule.use(loader.loader).loader(loader.loader).options(loader.options);
                }
            });
        });
    }

    generateBabelOptions(options, isClient) {
        if (!options.babelrc && !options.presets) {
            options.presets = [['vue-app', {
                targets: isClient ? { ie: 9, uglify: true } : { node: 'current' }
            }]];
        }
        return options;
    }

    /**
     * generate webpack base config based on lavas config
     *
     * @param {Object} buildConfig build config
     * @return {Object} webpackChain config
     */
    base(buildConfig = {}) {
        var _this = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let { globals, build } = _this.config;
            /* eslint-disable fecs-one-var-per-line */
            let { path, publicPath, filenames, cssSourceMap, cssMinimize,
                cssExtract, jsSourceMap, babelOptions,
                alias: { base: baseAlias = {} },
                defines: { base: baseDefines = {} }
            } = (0, _assign2.default)({}, build, buildConfig);
            /* eslint-enable fecs-one-var-per-line */

            let baseConfig = new _webpackChain2.default();

            // set output
            baseConfig.output.path(path).publicPath(publicPath);

            // set extensions & alias
            baseConfig.resolve.extensions.add('.js').add('.vue').add('.json');
            let aliasObject = (0, _assign2.default)({
                '@': globals.rootDir,
                '$': (0, _path.join)(globals.rootDir, '.lavas')
            }, baseAlias);
            (0, _keys2.default)(aliasObject).forEach(function (aliasKey) {
                baseConfig.resolve.alias.set(aliasKey, aliasObject[aliasKey]);
            });

            /**
             * set module rules
             */
            baseConfig.module.noParse(/es6-promise\.js$/);

            baseConfig.module.rule('vue').test(/\.vue$/).use('vue').loader('vue-loader').options((0, _loader.vueLoaders)({
                cssSourceMap,
                cssMinimize,
                cssExtract,
                babelOptions
            }));

            baseConfig.module.rule('js').test(/\.js$/).use('babel').loader('babel-loader').options(babelOptions).end().exclude.add(/node_modules/);

            baseConfig.module.rule('img').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('url').loader('url-loader').options({
                limit: 10000,
                name: (0, _path2.assetsPath)(filenames.img)
            });

            baseConfig.module.rule('font').test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/).use('url').loader('url-loader').options({
                limit: 10000,
                name: (0, _path2.assetsPath)(filenames.fonts)
            });

            /**
             * set plugins
             */
            baseConfig.plugin('define').use(_webpack2.default.DefinePlugin, [baseDefines]);

            if (cssExtract) {
                baseConfig.plugin('extract-css').use(_extractTextWebpackPlugin2.default, [{
                    filename: (0, _path2.assetsPath)(filenames.css)
                }]);
            }

            // https://github.com/clessg/progress-bar-webpack-plugin#options
            baseConfig.plugin('progress-bar').use(_progressBarWebpackPlugin2.default, [{
                format: '  [:bar] ' + _chalk2.default.green.bold(':percent') + ' (:elapsed seconds)',
                clear: false
            }]);

            if (_this.isProd) {
                // enable scope hoisting
                baseConfig.plugin('module-concatenation').use(_webpack2.default.optimize.ModuleConcatenationPlugin);

                // https://webpack.js.org/plugins/hashed-module-ids-plugin
                baseConfig.plugin('hashed-module-ids').use(_webpack2.default.HashedModuleIdsPlugin);

                // https://github.com/lavas-project/lavas/issues/77
                baseConfig.plugin('uglify-js').use(_uglifyjsWebpackPlugin2.default, [{
                    parallel: true, // enable `parallel` option
                    sourceMap: jsSourceMap
                }]);

                baseConfig.plugin('optimize-css').use(_optimizeCssAssetsWebpackPlugin2.default, [{
                    cssProcessorOptions: {
                        safe: true
                    }
                }]);
            } else {
                // fix watchpack time problem
                baseConfig.plugin('time-fix').use(_timefixWebpackPlugin2.default);

                // https://webpack.js.org/plugins/named-modules-plugin
                baseConfig.plugin('named-modules').use(_webpack2.default.NamedModulesPlugin);

                baseConfig.plugin('friendly-error').use(_friendlyErrorsWebpackPlugin2.default);
            }

            // return a webpackChain object
            return baseConfig;
        })();
    }

    /**
     * generate client base config based on lavas config
     *
     * @param {Object} internalBuildConfig build config
     * @return {Object} client base config
     */
    client(internalBuildConfig = {}) {
        var _this2 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            let { globals, build, serviceWorker } = _this2.config;

            /* eslint-disable fecs-one-var-per-line */
            let { publicPath, filenames, cssSourceMap, cssMinimize, cssExtract,
                jsSourceMap, bundleAnalyzerReport, extend, extendWithWebpackChain,
                babel,
                defines: { client: clientDefines = {} },
                alias: { client: clientAlias = {} },
                plugins: { base: basePlugins = [], client: clientPlugins = [] } } = (0, _assign2.default)({}, build, internalBuildConfig);
            /* eslint-enable fecs-one-var-per-line */

            let clientConfig = yield _this2.base((0, _assign2.default)(internalBuildConfig, {
                babelOptions: _this2.generateBabelOptions(babel, true)
            }));

            // set output format
            clientConfig.output.filename((0, _path2.assetsPath)(filenames.entry)).chunkFilename((0, _path2.assetsPath)(filenames.chunk));

            // add alias for client
            (0, _keys2.default)(clientAlias).forEach(function (aliasKey) {
                clientConfig.resolve.alias.set(aliasKey, clientAlias[aliasKey]);
            });

            // add module.rules for style
            _this2.addStyleRules(clientConfig, {
                cssSourceMap,
                cssMinimize,
                cssExtract
            });

            // set sourcemap in dev & prod mode
            clientConfig.devtool(jsSourceMap ? _this2.isDev ? 'cheap-module-eval-source-map' : 'nosources-source-map' : false);

            // modify vars in DefinePlugin
            clientConfig.plugin('define').init(function (Plugin, args) {
                return new Plugin((0, _assign2.default)(args[0], {
                    'process.env.VUE_ENV': '"client"',
                    'process.env.NODE_ENV': `"${_this2.env}"`
                }, clientDefines));
            });

            // split vendor js into its own file
            clientConfig.plugin('chunk-vendor').use(_webpack2.default.optimize.CommonsChunkPlugin, [{
                name: 'vendor',
                filename: (0, _path2.assetsPath)(filenames.vendor),
                minChunks(module, count) {
                    // any required modules inside node_modules are extracted to vendor
                    return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf('node_modules') >= 0;
                }
            }]);

            // split vue, vue-router, vue-meta and vuex into vue chunk
            clientConfig.plugin('chunk-vue').use(_webpack2.default.optimize.CommonsChunkPlugin, [{
                name: 'vue',
                filename: (0, _path2.assetsPath)(filenames.vue),
                minChunks(module, count) {
                    // On Windows, resource path will be seperated by '\',
                    // then paths like '\node_modules\vue\' cannot be matched because of '\v'.
                    // Transforming into '::node_modules::vue::' can solve this.
                    const PATH_SEP = '::';
                    let resource = module.resource;
                    let replacedResource = resource ? resource.split(_path.sep).join(PATH_SEP) : '';
                    let targets = ['vue', 'vue-router', 'vuex', 'vue-meta'];
                    // /^(::vue::|::vue-router::)$/i
                    let npmRegExp = new RegExp(PATH_SEP + targets.join('::|::') + PATH_SEP, 'i');
                    // /^(_vue@2.4.2@vue|_vue-router@1.2.3@vue-router)$/i
                    let cnpmRegExp = new RegExp(targets.map(t => `_${t}@\\d+\\.\\d+\\.\\d+@${t}`).join('|'), 'i');

                    return resource && replacedResource.indexOf('node_modules') !== -1 && (npmRegExp.test(replacedResource) || cnpmRegExp.test(replacedResource));
                }
            }]);

            // extract webpack runtime and module manifest to its own file in order to
            // prevent vendor hash from being updated whenever app bundle is updated
            clientConfig.plugin('chunk-manifest').use(_webpack2.default.optimize.CommonsChunkPlugin, [{
                name: 'manifest',
                chunks: ['vue']
            }]);

            // Copy static files to /dist.
            let copyList = [{
                from: (0, _path.join)(globals.rootDir, _constants.ASSETS_DIRNAME_IN_DIST),
                to: _constants.ASSETS_DIRNAME_IN_DIST,
                ignore: ['*.md']
            }];

            if (_this2.isProd && serviceWorker) {
                // Copy workbox.dev|prod.js from node_modules manually.
                copyList = copyList.concat((0, _workbox.getWorkboxFiles)(_this2.isProd).map(function (f) {
                    return {
                        from: (0, _path.join)(_workbox.WORKBOX_PATH, `../${f}`),
                        to: (0, _path2.assetsPath)(`js/${f}`)
                    };
                }));

                // Use workbox@2.x in prod mode.
                (0, _workbox.useWorkbox)(clientConfig, _this2.config);

                // inject register code for service worker into HTML
                clientConfig.plugin('sw-register').use(_swRegisterWebpackPlugin2.default, [{
                    filePath: (0, _path.resolve)(__dirname, 'templates/sw-register.js'),
                    prefix: serviceWorker && serviceWorker.swPath || publicPath
                }]).after('html');
            }
            clientConfig.plugin('copy').use(_copyWebpackPlugin2.default, [copyList]);

            // Bundle analyzer.
            if (bundleAnalyzerReport) {
                clientConfig.plugin('bundle-analyzer').use(_webpackBundleAnalyzer.BundleAnalyzerPlugin, [bundleAnalyzerReport]);
            }

            // call extendWithWebpackChain function if provided
            let extendWithWebpackChainArray = [extendWithWebpackChain, _this2.config.build.extendWithWebpackChain];
            for (let i = 0; i < extendWithWebpackChainArray.length; i++) {
                let extendFunc = extendWithWebpackChainArray[i];
                if (typeof extendFunc === 'function') {
                    yield extendFunc(clientConfig, {
                        type: 'client',
                        env: _this2.env
                    });
                }
            }

            // convert webpackChain to plain webpack config object
            let webpackConfigObject = clientConfig.toConfig();

            if (basePlugins && basePlugins.length) {
                webpackConfigObject.plugins = [...webpackConfigObject.plugins, ...basePlugins];
            }
            if (clientPlugins && clientPlugins.length) {
                webpackConfigObject.plugins = [...webpackConfigObject.plugins, ...clientPlugins];
            }

            // call extend function if provided
            if (typeof extend === 'function') {
                extend.call(_this2, webpackConfigObject, {
                    type: 'base',
                    env: _this2.env
                });
                extend.call(_this2, webpackConfigObject, {
                    type: 'client',
                    env: _this2.env
                });
            }

            return webpackConfigObject;
        })();
    }

    /**
     * generate webpack server config based on lavas config
     *
     * @param {Object} internalBuildConfig build config
     * @return {Object} webpack server config
     */
    server(internalBuildConfig = {}) {
        var _this3 = this;

        return (0, _asyncToGenerator3.default)(function* () {
            /* eslint-disable fecs-one-var-per-line */
            let { extend, extendWithWebpackChain, nodeExternalsWhitelist = [],
                babel,
                defines: { server: serverDefines = {} },
                alias: { server: serverAlias = {} },
                plugins: { base: basePlugins = [], server: serverPlugins = [] }
            } = (0, _assign2.default)({}, _this3.config.build, internalBuildConfig);
            /* eslint-enable fecs-one-var-per-line */

            let serverConfig = yield _this3.base((0, _assign2.default)(internalBuildConfig, {
                babelOptions: _this3.generateBabelOptions(babel, false)
            }));

            // set target & output
            serverConfig.target('node').output.filename('server-bundle.js').libraryTarget('commonjs2');

            // add alias for server
            (0, _keys2.default)(serverAlias).forEach(function (aliasKey) {
                serverConfig.resolve.alias.set(aliasKey, serverAlias[aliasKey]);
            });

            /**
             * Generally in ssr, we don't need any loader to handle style files,
             * but some UI library such as vuetify will require style files directly in JS file.
             * So we still add some relative loaders here.
             */
            _this3.addStyleRules(serverConfig, {
                cssSourceMap: false,
                cssMinimize: false,
                cssExtract: false
            });

            // https://webpack.js.org/configuration/externals/#externals
            // https://github.com/liady/webpack-node-externals
            serverConfig.externals((0, _webpackNodeExternals2.default)({
                // do not externalize CSS files in case we need to import it from a dep
                whitelist: [...nodeExternalsWhitelist, /\.(css|vue)$/]
            }));

            // modify vars in DefinePlugin
            serverConfig.plugin('define').init(function (Plugin, args) {
                return new Plugin((0, _assign2.default)(args[0], {
                    'process.env.VUE_ENV': '"server"',
                    'process.env.NODE_ENV': `"${_this3.env}"`
                }, serverDefines));
            });

            // add vue-ssr-server-plugin
            serverConfig.plugin('ssr-server').use(_serverPlugin2.default, [{
                filename: (0, _path.join)(_constants.LAVAS_DIRNAME_IN_DIST, _constants.SERVER_BUNDLE)
            }]);

            // call extendWithWebpackChain function if provided
            let extendWithWebpackChainArray = [extendWithWebpackChain, _this3.config.build.extendWithWebpackChain];
            for (let i = 0; i < extendWithWebpackChainArray.length; i++) {
                let extendFunc = extendWithWebpackChainArray[i];
                if (typeof extendFunc === 'function') {
                    yield extendFunc(serverConfig, {
                        type: 'server',
                        env: _this3.env
                    });
                }
            }

            // convert webpackChain to plain webpack config object
            let webpackConfigObject = serverConfig.toConfig();

            // add plugins from `plugins` option
            if (basePlugins && basePlugins.length) {
                webpackConfigObject.plugins = [...webpackConfigObject.plugins, ...basePlugins];
            }
            if (serverPlugins && serverPlugins.length) {
                webpackConfigObject.plugins = [...webpackConfigObject.plugins, ...serverPlugins];
            }

            // call extend function if provided
            if (typeof extend === 'function') {
                extend.call(_this3, webpackConfigObject, {
                    type: 'base',
                    env: _this3.env
                });
                extend.call(_this3, webpackConfigObject, {
                    type: 'server',
                    env: _this3.env
                });
            }

            return webpackConfigObject;
        })();
    }
}
exports.default = WebpackConfig;
module.exports = exports['default'];