webpack-genius
Version:
**For chinese developers:** you'd better add taobao mirror before everything start. Or you may fail to install. ```bash yarn config set registry http://registry.npm.taobao.org ```
402 lines (401 loc) • 16.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebpackGenius = void 0;
var tslib_1 = require("tslib");
var fs_1 = tslib_1.__importDefault(require("fs"));
var path_1 = tslib_1.__importDefault(require("path"));
var webpack = tslib_1.__importStar(require("webpack"));
var lodash_clonedeep_1 = tslib_1.__importDefault(require("lodash.clonedeep"));
var HotModule_1 = require("./plugins/HotModule");
var HashedModuleIds_1 = require("./plugins/HashedModuleIds");
var Html_1 = require("./plugins/Html");
var Html_2 = require("./rules/Html");
var Clean_1 = require("./plugins/Clean");
var MiniCss_1 = require("./plugins/MiniCss");
var Tsx_1 = require("./rules/Tsx");
var Jsx_1 = require("./rules/Jsx");
var Css_1 = require("./rules/Css");
var Scss_1 = require("./rules/Scss");
var Less_1 = require("./rules/Less");
var LessAntd_1 = require("./rules/LessAntd");
var Asset_1 = require("./rules/Asset");
var Gzip_1 = require("./plugins/Gzip");
var Copy_1 = require("./plugins/Copy");
var Define_1 = require("./plugins/Define");
var CssNodeModules_1 = require("./rules/CssNodeModules");
var Json5_1 = require("./rules/Json5");
var ProgressBar_1 = require("./plugins/ProgressBar");
var Preload_1 = require("./plugins/Preload");
var ReactRefresh_1 = require("./plugins/ReactRefresh");
var ErrorOverlay_1 = require("./plugins/ErrorOverlay");
var AntdDayJs_1 = require("./plugins/AntdDayJs");
var mini_css_extract_plugin_1 = tslib_1.__importDefault(require("mini-css-extract-plugin"));
var packageFile = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve('./package.json')).toString());
var WebpackGenius = /** @class */ (function () {
function WebpackGenius(environment, port) {
this.webpack = webpack;
this.config = {
output: {},
stats: {},
resolve: {},
entry: [],
plugins: [],
devServer: {},
module: {
rules: [],
},
optimization: {},
};
this.plugins = {};
this.rules = {};
this.environment = environment || 'development';
this.port = port;
}
WebpackGenius.prototype.getConfig = function () {
return lodash_clonedeep_1.default(this.config);
};
WebpackGenius.prototype.hasPackage = function (name) {
return !!packageFile.dependencies[name] || !!packageFile.devDependencies[name];
};
WebpackGenius.prototype.getPackageField = function (name) {
return packageFile[name];
};
WebpackGenius.prototype.getPort = function () {
return this.port;
};
WebpackGenius.prototype.getEnvironment = function () {
return this.environment;
};
WebpackGenius.prototype.isHot = function () {
return process.env.IS_HOT === 'yes';
};
WebpackGenius.prototype.isBuild = function () {
return process.env.IS_HOT !== 'yes';
};
WebpackGenius.prototype.switchChunkHash = function (hashNumber) {
if (hashNumber === void 0) { hashNumber = 15; }
if (this.isHot()) {
return 'chunkhash.[id]';
}
return "[chunkhash:" + hashNumber + "]";
};
WebpackGenius.prototype.switchContentHash = function (hashNumber) {
if (hashNumber === void 0) { hashNumber = 15; }
if (this.isHot()) {
return 'contenthash.[id]';
}
return "[contenthash:" + hashNumber + "]";
};
WebpackGenius.prototype.getUglifyConfig = function () {
return lodash_clonedeep_1.default(this.uglifyConfig);
};
WebpackGenius.prototype.setUglifyConfig = function (config) {
this.uglifyConfig = config;
return this;
};
WebpackGenius.prototype.target = function (target) {
this.config.target = target;
return this;
};
WebpackGenius.prototype.devtool = function (devtool) {
this.config.devtool = typeof devtool === 'function' ? devtool(this) : devtool;
return this;
};
WebpackGenius.prototype.mode = function (mode) {
this.config.mode = typeof mode === 'function' ? mode(this) : mode;
return this;
};
WebpackGenius.prototype.noParse = function (pattern) {
this.config.module.noParse = pattern;
return this;
};
WebpackGenius.prototype.optimization = function (fn) {
var result = fn(this.config.optimization, this);
if (typeof result === 'object') {
this.config.optimization = lodash_clonedeep_1.default(result);
}
return this;
};
WebpackGenius.prototype.output = function (fn) {
var result = fn(this.config.output, this);
if (typeof result === 'object') {
this.config.output = lodash_clonedeep_1.default(result);
}
return this;
};
WebpackGenius.prototype.miniCss = function (is) {
this.pluginMiniCss(function (plugin) {
plugin.enable(is);
});
var handle = function (css) {
if (is) {
css
.removeLoader('style-loader')
.removeLoader('cache-loader')
.addLoaderBefore({
loader: mini_css_extract_plugin_1.default.loader,
options: {
// Relative position between css and image
publicPath: '../',
},
}, 'css-loader');
}
else {
css
.removeLoader(mini_css_extract_plugin_1.default.loader)
.addLoaderBefore({ loader: 'style-loader' }, 'css-loader')
.addLoaderBefore({ loader: 'cache-loader' });
}
};
this
.ruleCss(handle)
.ruleCssNodeModules(handle)
.ruleLess(handle)
.ruleAntd(handle)
.ruleScss(handle);
this.optimization(function (optimization) {
if (!optimization.splitChunks) {
optimization.splitChunks = {};
}
var chunks = optimization.splitChunks;
if (typeof chunks.cacheGroups !== 'object') {
chunks.cacheGroups = {};
}
if (is) {
Object.assign(chunks.cacheGroups, {
// https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file
styles: {
test: /\.css$/,
name: 'styles',
chunks: 'all',
enforce: true,
},
});
}
else {
Reflect.deleteProperty(chunks.cacheGroups, 'styles');
}
});
return this;
};
WebpackGenius.prototype.devServer = function (fn) {
var result = fn(this.config.devServer, this);
if (typeof result === 'object') {
this.config.devServer = lodash_clonedeep_1.default(result);
}
return this;
};
WebpackGenius.prototype.stats = function (fn) {
var result = fn(this.config.stats, this);
if (typeof result === 'object') {
this.config.stats = lodash_clonedeep_1.default(result);
}
return this;
};
WebpackGenius.prototype.entry = function (entry) {
this.config.entry = entry;
return this;
};
WebpackGenius.prototype.getOriginalEntry = function () {
return this.config.entry;
};
WebpackGenius.prototype.resolve = function (fn) {
var result = fn(this.config.resolve, this);
if (typeof result === 'object') {
this.config.resolve = lodash_clonedeep_1.default(result);
}
return this;
};
WebpackGenius.prototype.addPlugin = function (plugin) {
var _a;
(_a = this.config.plugins) === null || _a === void 0 ? void 0 : _a.push(plugin);
return this;
};
WebpackGenius.prototype.pluginHotModuleReplace = function (fn) {
var _this = this;
var plugin = this.findPlugin('hot-module-replace', function () { return new HotModule_1.HotModule(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginErrorOverlay = function (fn) {
var _this = this;
var plugin = this.findPlugin('error-overlay', function () { return new ErrorOverlay_1.ErrorOverlay(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginReactRefresh = function (fn) {
var _this = this;
var plugin = this.findPlugin('react-refresh', function () { return new ReactRefresh_1.ReactRefresh(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginAntdDayJs = function (fn) {
var _this = this;
var plugin = this.findPlugin('antd-day-js', function () { return new AntdDayJs_1.AntdDayJs(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginCopy = function (fn) {
var _this = this;
var plugin = this.findPlugin('copy', function () { return new Copy_1.Copy(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginGzip = function (fn) {
var _this = this;
var plugin = this.findPlugin('gzip', function () { return new Gzip_1.Gzip(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginDefine = function (fn) {
var _this = this;
var plugin = this.findPlugin('define', function () { return new Define_1.Define(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginProgressBar = function (fn) {
var _this = this;
var plugin = this.findPlugin('progress-bar', function () { return new ProgressBar_1.ProgressBar(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginPreload = function (fn) {
var _this = this;
var plugin = this.findPlugin('preload', function () { return new Preload_1.Preload(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginHtml = function (fn) {
var _this = this;
var plugin = this.findPlugin('html', function () { return new Html_1.Html(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginHashedModule = function (fn) {
var _this = this;
var plugin = this.findPlugin('hashed-module', function () { return new HashedModuleIds_1.HashedModuleIds(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginClean = function (fn) {
var _this = this;
var plugin = this.findPlugin('clean', function () { return new Clean_1.Clean(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.pluginMiniCss = function (fn) {
var _this = this;
var plugin = this.findPlugin('mini-css', function () { return new MiniCss_1.MiniCss(_this); });
fn === null || fn === void 0 ? void 0 : fn(plugin);
return this;
};
WebpackGenius.prototype.addRule = function (rule) {
var _a;
(_a = this.config.module) === null || _a === void 0 ? void 0 : _a.rules.push(rule);
return this;
};
WebpackGenius.prototype.ruleTsx = function (fn) {
var _this = this;
var rule = this.findRule('tsx', function () { return new Tsx_1.Tsx(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleJsx = function (fn) {
var _this = this;
var rule = this.findRule('jsx', function () { return new Jsx_1.Jsx(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleCssNodeModules = function (fn) {
var _this = this;
var rule = this.findRule('css-node-modules', function () { return new CssNodeModules_1.CssNodeModules(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleCss = function (fn) {
var _this = this;
var rule = this.findRule('css', function () { return new Css_1.Css(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleScss = function (fn) {
var _this = this;
var rule = this.findRule('scss', function () { return new Scss_1.Scss(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleLess = function (fn) {
var _this = this;
var rule = this.findRule('less', function () { return new Less_1.Less(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
// Shortcut for style rules
WebpackGenius.prototype.disableCssModule = function () {
this.ruleScss(function (rule) {
rule.disableCssModules();
});
this.ruleLess(function (rule) {
rule.disableCssModules();
});
this.ruleCss(function (rule) {
rule.disableCssModules();
});
// It's originally disabled
this.ruleCssNodeModules(function (rule) {
rule.disableCssModules();
});
return this;
};
WebpackGenius.prototype.ruleAntd = function (fn) {
var _this = this;
var rule = this.findRule('less-antd', function () { return new LessAntd_1.LessAntd(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleAsset = function (fn) {
var _this = this;
var rule = this.findRule('asset', function () { return new Asset_1.Asset(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleHtml = function (fn) {
var _this = this;
var rule = this.findRule('html', function () { return new Html_2.Html(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.ruleJson5 = function (fn) {
var _this = this;
var rule = this.findRule('json5', function () { return new Json5_1.Json5(_this); });
fn === null || fn === void 0 ? void 0 : fn(rule);
return this;
};
WebpackGenius.prototype.collect = function () {
var config = lodash_clonedeep_1.default(this.config);
// Plugin has sequence sometimes
Object.values(this.plugins).reverse().forEach(function (plugin) {
var _a;
if (plugin.isUsed()) {
(_a = config.plugins) === null || _a === void 0 ? void 0 : _a.unshift.apply(_a, tslib_1.__spread(plugin.collect()));
}
});
Object.values(this.rules).forEach(function (rule) {
var _a;
if (rule.isUsed()) {
(_a = config.module) === null || _a === void 0 ? void 0 : _a.rules.push(rule.collect());
}
});
return config;
};
WebpackGenius.prototype.findPlugin = function (name, or) {
this.plugins[name] = this.plugins[name] || or();
return this.plugins[name];
};
WebpackGenius.prototype.findRule = function (name, or) {
this.rules[name] = this.rules[name] || or();
return this.rules[name];
};
return WebpackGenius;
}());
exports.WebpackGenius = WebpackGenius;