From d9491647477b0e83bebf63d97970502f14f83b05 Mon Sep 17 00:00:00 2001 From: Mizok Date: Mon, 4 Apr 2022 23:23:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86config=20?= =?UTF-8?q?=E8=A8=AD=E8=A8=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- node-util.ts | 4 ++ src/template/head.ejs | 2 + webpack.config.ts | 131 +++++++++++++++++++++--------------------- 4 files changed, 73 insertions(+), 66 deletions(-) create mode 100644 node-util.ts diff --git a/README.md b/README.md index 899e456..4efa3d7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ title: webpack-template date: author: Mizok -version: 0.2.1 +version: 0.3.1 tags: --- diff --git a/node-util.ts b/node-util.ts new file mode 100644 index 0000000..5e1356e --- /dev/null +++ b/node-util.ts @@ -0,0 +1,4 @@ +module.exports = { + fs:require('fs'), + path:require('fs') +} \ No newline at end of file diff --git a/src/template/head.ejs b/src/template/head.ejs index ce4b31d..3235ae4 100644 --- a/src/template/head.ejs +++ b/src/template/head.ejs @@ -2,6 +2,8 @@ + + <%= title%> diff --git a/webpack.config.ts b/webpack.config.ts index 74d228e..4214868 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -7,85 +7,85 @@ const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plug import * as webpack from 'webpack'; import 'webpack-dev-server'; // dont remove this import, it's for webpack-dev-server type import HtmlWebpackPlugin from 'html-webpack-plugin'; -const NO_COMPRESS = false; -const PAGES_PATH = resolve(__dirname, './src/pages'); +const COMPRESS = false; - -//generate entry object -const entry: webpack.EntryObject = (() => { +const getEntriesByParsingTemplateNames = (templatesFolderName)=>{ + const folderPath = resolve(__dirname, `./src/${templatesFolderName}`); const entryObj: webpack.EntryObject = {}; const templateRegx = /(.*)(\.)(ejs|html)/g; - fs.readdirSync(PAGES_PATH).forEach((o: string) => { + fs.readdirSync(folderPath).forEach((o: string) => { if (!o.match(templateRegx)) return; let entryName: string = o.replace(templateRegx, `$1`); const entryRegex = /(.*)(\.)(.*)/g; if (entryName.match(entryRegex)) { entryName = entryName.replace(entryRegex, `$3`); } - const entryPath = resolve(__dirname, `src/ts/${entryName}.ts`); + let entryPath = resolve(__dirname, `src/ts/${entryName}.ts`); // entry stylesheet - const entryStyleSheetPath = resolve(__dirname, `./src/scss/${entryName}.scss`); - const entryExist = fs.existsSync(entryPath); - const entryStyleSheetExist = fs.existsSync(entryStyleSheetPath); + let entryStyleSheetPath = resolve(__dirname, `./src/scss/${templatesFolderName}/${entryName}.scss`); + + entryPath = fs.existsSync(entryPath)?entryPath:undefined; + entryStyleSheetPath = fs.existsSync(entryStyleSheetPath)?entryStyleSheetPath:undefined; - if (entryExist) { - if (!entryStyleSheetExist) { - throw new Error(`src/scss/${entryName}.scss is not found`) - } - } - else { - throw new Error(`src/ts/${entryName}.ts is not found`) - } // import es6-promise automatically - entryObj[entryName] = ['es6-promise/auto',entryPath, entryStyleSheetPath]; + entryObj[entryName] = ['es6-promise/auto',entryPath, entryStyleSheetPath].filter(function (x: string | undefined) { + return x !== undefined; + }); }) return entryObj; -})() -//generate htmlWebpackPlugin instances -const entryTemplates: HtmlWebpackPlugin[] = fs.readdirSync(PAGES_PATH).map((fullFileName: string) => { - const templateRegx = /(.*)(\.)(ejs|html)/g; - const ejsRegex = /(.*)(\.ejs)/g; - const entryRegex = /(.*)(\.)(.*)(\.)(ejs|html)/g; - if (!fullFileName.match(templateRegx)) return; - const isEjs = fullFileName.match(ejsRegex); - let outputFileName = fullFileName.replace(templateRegx, `$1`); - let entryName = outputFileName; - if (fullFileName.match(entryRegex)) { - outputFileName = fullFileName.replace(entryRegex, `$1`); - entryName = fullFileName.replace(entryRegex, `$3`); - } - const ejsFilePath = resolve(PAGES_PATH, `${fullFileName}`); - const data = fs.readFileSync(ejsFilePath, 'utf8') - if (!data) { - fs.writeFile(ejsFilePath, ' ', () => { }); - console.warn(`WARNING : ${fullFileName} is an empty file`); - } +} - return new HtmlWebpackPlugin({ - cache: false, - chunks: [entryName], - filename: `${outputFileName}.html`, - template: isEjs ? ejsFilePath : ejsFilePath.replace(ejsRegex, `$1.html`), - favicon: 'src/assets/images/logo.svg', - minify: NO_COMPRESS ? false : { - collapseWhitespace: true, - keepClosingSlash: true, - removeComments: true, - removeRedundantAttributes: false, - removeScriptTypeAttributes: true, - removeStyleLinkTypeAttributes: true, - useShortDoctype: true +const getTemaplteInstancesByParsingTemplateNames = (templatesFolderName,atRoot=true)=>{ + const forderPath = resolve(__dirname, `./src/${templatesFolderName}`); + return fs.readdirSync(forderPath).map((fullFileName: string) => { + const templateRegx = /(.*)(\.)(ejs|html)/g; + const ejsRegex = /(.*)(\.ejs)/g; + const entryRegex = /(.*)(\.)(.*)(\.)(ejs|html)/g; + if (!fullFileName.match(templateRegx)) return; + const isEjs = fullFileName.match(ejsRegex); + let outputFileName = fullFileName.replace(templateRegx, `$1`); + let entryName = outputFileName; + if (fullFileName.match(entryRegex)) { + outputFileName = fullFileName.replace(entryRegex, `$1`); + entryName = fullFileName.replace(entryRegex, `$3`); } - }) -}).filter(function (x: HtmlWebpackPlugin | undefined) { - return x !== undefined; -}); + const ejsFilePath = resolve(forderPath, `${fullFileName}`); + const data = fs.readFileSync(ejsFilePath, 'utf8') + if (!data) { + fs.writeFile(ejsFilePath, ' ', () => { }); + console.warn(`WARNING : ${fullFileName} is an empty file`); + } + + return new HtmlWebpackPlugin({ + cache: false, + chunks: [entryName], + filename: `${atRoot?'':templatesFolderName+'/'}${outputFileName}.html`, + template: isEjs ? ejsFilePath : ejsFilePath.replace(ejsRegex, `$1.html`), + favicon: 'src/assets/images/logo.svg', + minify: COMPRESS ? { + collapseWhitespace: true, + keepClosingSlash: true, + removeComments: true, + removeRedundantAttributes: false, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true, + useShortDoctype: true + }:false + }) + }).filter(function (x: HtmlWebpackPlugin | undefined) { + return x !== undefined; + }); +} + +const pageEntries: webpack.EntryObject = getEntriesByParsingTemplateNames('pages'); +//generate htmlWebpackPlugin instances +const pageEntryTemplates: HtmlWebpackPlugin[] = getTemaplteInstancesByParsingTemplateNames('pages'); const config = (env:any,argv:any):webpack.Configuration=>{ const configObj:webpack.Configuration = { - entry: entry, + entry: pageEntries, output: { filename: 'js/[name].[chunkhash].js', chunkFilename: '[id].[chunkhash].js', @@ -122,7 +122,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{ { loader: 'html-loader', options: { - minimize: !NO_COMPRESS + minimize: COMPRESS } } ], @@ -133,7 +133,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{ { loader: 'html-loader', options: { - minimize: !NO_COMPRESS + minimize: COMPRESS } }, { @@ -175,10 +175,10 @@ const config = (env:any,argv:any):webpack.Configuration=>{ } }, (() => { - return NO_COMPRESS ? { + return COMPRESS ? 'sass-loader': { loader: 'sass-loader', options: { sourceMap: true, sassOptions: { minimize: false, outputStyle: 'expanded' } } - } : 'sass-loader' + } })() ] @@ -192,12 +192,13 @@ const config = (env:any,argv:any):webpack.Configuration=>{ }, resolve: { alias: { + '@node':resolve(__dirname,'./node.ts'), '@img': resolve(__dirname, './src/assets/images/'), '@font': resolve(__dirname, './src/assets/fonts/') } }, optimization: { - minimize: !NO_COMPRESS, + minimize: COMPRESS, minimizer: [new TerserPlugin({ terserOptions: { format: { @@ -216,7 +217,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{ }, plugins: [ (() => { - return NO_COMPRESS ? undefined : new OptimizeCssAssetsWebpackPlugin() + return COMPRESS ? new OptimizeCssAssetsWebpackPlugin():undefined })(), new MiniCssExtractPlugin({ filename: 'css/[name].css' @@ -236,7 +237,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{ ], } ), - ...entryTemplates, + ...pageEntryTemplates ].filter(function (x) { return x !== undefined;