Skip to content

Commit

Permalink
修改部分config 設計
Browse files Browse the repository at this point in the history
  • Loading branch information
@mizok
mizok committed Apr 4, 2022
1 parent d4d9c84 commit d949164
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 66 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: webpack-template
date:
author: Mizok
version: 0.2.1
version: 0.3.1
tags:
---

Expand Down
4 changes: 4 additions & 0 deletions node-util.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
fs:require('fs'),
path:require('fs')
}
2 changes: 2 additions & 0 deletions src/template/head.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" content="notranslate" />
<meta name="format-detection" content="telephone=no">
<title><%= title%></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand Down
131 changes: 66 additions & 65 deletions webpack.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -122,7 +122,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{
{
loader: 'html-loader',
options: {
minimize: !NO_COMPRESS
minimize: COMPRESS
}
}
],
Expand All @@ -133,7 +133,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{
{
loader: 'html-loader',
options: {
minimize: !NO_COMPRESS
minimize: COMPRESS
}
},
{
Expand Down Expand Up @@ -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'
}
})()

]
Expand All @@ -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: {
Expand All @@ -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'
Expand All @@ -236,7 +237,7 @@ const config = (env:any,argv:any):webpack.Configuration=>{
],
}
),
...entryTemplates,
...pageEntryTemplates

].filter(function (x) {
return x !== undefined;
Expand Down

0 comments on commit d949164

Please sign in to comment.