@luban-cli/cli-plugin-service
Version:
A development runtime environment dependency
178 lines • 8.54 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const DefinePlugin_1 = __importDefault(require("webpack/lib/DefinePlugin"));
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
const fs_extra_1 = __importDefault(require("fs-extra"));
const path_1 = __importDefault(require("path"));
const cli_shared_utils_1 = require("@luban-cli/cli-shared-utils");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
const webpack_1 = require("webpack");
const WebpackBar = require("webpackbar");
const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const resolveClientEnv_1 = require("../utils/resolveClientEnv");
const movePlugin_1 = require("./../utils/movePlugin");
const cleanAssetPath_1 = require("../utils/cleanAssetPath");
class Plugin {
apply(params) {
const { api, projectConfig, options, args } = params;
const isProduction = process.env.NODE_ENV === "production";
const filename = `${projectConfig.assetsDir.styles}/[name]${isProduction ? "-[hash:8]" : ""}.css`;
const chunkFilename = `${projectConfig.assetsDir.styles}/[name]${isProduction ? "-[hash:8].chunk" : ""}.css`;
const extractOptions = {
filename: cleanAssetPath_1.cleanAssetPath(filename),
chunkFilename: cleanAssetPath_1.cleanAssetPath(chunkFilename),
};
const outputDir = api.resolve(projectConfig.outputDir);
api.chainWebpack("client", (webpackConfig) => {
webpackConfig
.plugin("define")
.use(DefinePlugin_1.default, [
Object.assign(Object.assign({}, resolveClientEnv_1.resolveClientEnv(projectConfig.publicPath)), { __IS_BROWSER__: true }),
]);
const htmlPath = projectConfig.templatePath === "index.html"
? api.resolve("template/index.html")
: api.resolve(`template/${projectConfig.templatePath}`);
if (!fs_extra_1.default.pathExistsSync(htmlPath)) {
cli_shared_utils_1.error(`The template html file ${htmlPath} not exit, please check it`);
process.exit();
}
const htmlPluginOptions = {
template: htmlPath,
templateParameters: Object.assign(Object.assign({}, resolveClientEnv_1.resolveClientEnv(projectConfig.publicPath, true)), { title: projectConfig.ssr ? "[Client] React App" : "React App" }),
minify: isProduction
? {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
: false,
};
webpackConfig.plugin("client-html").use(html_webpack_plugin_1.default, [htmlPluginOptions]);
if (projectConfig.ssr) {
webpackConfig.plugin("server-html").use(html_webpack_plugin_1.default, [
{
filename: "server.ejs",
template: path_1.default.resolve(__dirname, "../template/dynamic/server.template.ejs"),
},
]);
webpackConfig
.plugin("manifest")
.use(webpack_manifest_plugin_1.WebpackManifestPlugin, [
{ fileName: "asset-manifest.json", publicPath: projectConfig.publicPath },
]);
}
const publicDir = api.resolve("public");
if (fs_extra_1.default.pathExistsSync(publicDir)) {
webpackConfig.plugin("copy").use(CopyWebpackPlugin, [
{
patterns: [
{
from: publicDir,
to: outputDir,
toType: "dir",
globOptions: {
dot: true,
gitignore: true,
ignore: [".DS_Store", projectConfig.templatePath],
},
},
],
},
]);
}
webpackConfig
.plugin("webpack-bar")
.use(WebpackBar, [{ name: `[Client] ${options.projectName}`, color: "#41b883" }]);
webpackConfig.plugin("fork-ts-checker").use(ForkTsCheckerWebpackPlugin, [
{
typescript: {
diagnosticOptions: {
semantic: true,
syntactic: true,
},
mode: "write-references",
},
},
]);
if (isProduction) {
if (projectConfig.indexPath !== "index.html") {
webpackConfig
.plugin("move")
.use(movePlugin_1.MovePlugin, [
path_1.default.resolve(`${outputDir}/index.html`),
path_1.default.resolve(`${outputDir}/${projectConfig.indexPath}`),
]);
}
webpackConfig.plugin("preload").use(PreloadWebpackPlugin, [
{
rel: "preload",
include: "initial",
fileBlacklist: [/map.js$/],
},
]);
webpackConfig.plugin("prefetch").use(PreloadWebpackPlugin, [
{
rel: "prefetch",
include: "asyncChunks",
},
]);
}
});
api.chainWebpack("server", (webpackConfig) => {
webpackConfig
.plugin("define")
.use(DefinePlugin_1.default, [
Object.assign(Object.assign({}, resolveClientEnv_1.resolveClientEnv(projectConfig.publicPath)), { __IS_BROWSER__: false }),
]);
webpackConfig
.plugin("webpack-bar")
.use(WebpackBar, [{ name: `[Server] ${options.projectName}`, color: "#41b883" }]);
});
api.chainAllWebpack((webpackConfig, id) => {
webpackConfig
.plugin("extract-css")
.use(mini_css_extract_plugin_1.default, [extractOptions])
.end();
webpackConfig
.plugin("case-sensitive-path")
.use(CaseSensitivePathsPlugin)
.end();
if (isProduction) {
if (args.report) {
webpackConfig.plugin("bundle-analyzer").use(webpack_bundle_analyzer_1.BundleAnalyzerPlugin, [
{
logLevel: "error",
openAnalyzer: false,
analyzerMode: args.report ? "static" : "disabled",
reportFilename: `report-${id}.html`,
},
]);
}
}
if (!isProduction) {
webpackConfig.plugin("hmr").use(webpack_1.HotModuleReplacementPlugin);
webpackConfig
.plugin("refresh")
.use(react_refresh_webpack_plugin_1.default, [{ overlay: projectConfig.refreshOverlay }]);
}
});
}
}
exports.default = Plugin;
//# sourceMappingURL=plugin.js.map