diff --git a/component/nav.html b/component/nav.html new file mode 100644 index 0000000..234ef45 --- /dev/null +++ b/component/nav.html @@ -0,0 +1,16 @@ +
+
+
+ +
+ +
+
+ diff --git a/html/index.html b/html/index.html index cbc7315..0c95732 100644 --- a/html/index.html +++ b/html/index.html @@ -7,27 +7,9 @@ - - - +
- +
@@ -42,8 +24,6 @@
- - - \ No newline at end of file + diff --git a/inject-multiple-components-loader.js b/inject-multiple-components-loader.js new file mode 100644 index 0000000..640e7d0 --- /dev/null +++ b/inject-multiple-components-loader.js @@ -0,0 +1,14 @@ +const fs = require('fs'); +const path = require('path'); + +module.exports = function(source) { + const components = this.getOptions().components || []; + + components.forEach(component => { + const componentPath = path.resolve(__dirname, component.path); + const componentHtml = fs.readFileSync(componentPath, 'utf8'); + source = source.replace(component.placeholder, `
${componentHtml}
`); + }); + + return source; +}; diff --git a/package.json b/package.json index a9b80b2..c8c8932 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "serve": "webpack serve" }, "dependencies": { + "html-loader": "^5.0.0", "node-sass": "^9.0.0" } } diff --git a/webpack.config.js b/webpack.config.js index 8275c92..ae32865 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const fs = require('fs'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); @@ -8,36 +9,54 @@ const isProduction = process.env.NODE_ENV === 'production'; const stylesHandler = MiniCssExtractPlugin.loader; -let htmlPageNames = ['example1']; -let multipleHtmlPlugins = htmlPageNames.map(name => { - return new HtmlWebpackPlugin({ - template: `html/${name}.html`, // relative path to the HTML files - filename: `${name}.html`, // output HTML files - chunks: [`${name}`] // respective JS files - }) +// read all html files in 'html' folder +const htmlDirectory = path.resolve(__dirname, 'html'); + +// get all html file names except 'index.html' +const htmlPageNames = fs.readdirSync(htmlDirectory) +.filter(file => file.endsWith('.html') && file !== 'index.html') +.map(file => file.replace('.html', '')); + +const multipleHtmlPlugins = htmlPageNames.map(name => { + return new HtmlWebpackPlugin({ + template: `${htmlDirectory}/${name}.html`, + filename: `${name}.html`, + chunks: [name] + }); }); + +function generateComponentOptions(componentDir) { + const directoryPath = path.resolve(__dirname, componentDir); + const components = fs.readdirSync(directoryPath) + .filter(file => file.endsWith('.html')) + .map(file => ({ + path: path.join(componentDir, file), + placeholder: `<${path.basename(file, '.html')}>` + })); + + return components; +} + +const components = generateComponentOptions('./component'); + const config = { - entry: './src/index.ts', + entry: './src/index.ts', output: { - path: path.resolve(__dirname, 'dist'), - }, + path: path.resolve(__dirname, 'dist') + }, devServer: { - open: true, - host: 'localhost', - }, + open: true, + host: 'localhost' + }, plugins: [ new HtmlWebpackPlugin({ - template: 'html/index.html', + template: `${htmlDirectory}/index.html` }), - new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', }), - - // Add your plugins here - // Learn more about plugins from https://webpack.js.org/configuration/plugins/ ].concat(multipleHtmlPlugins), module: { rules: [ @@ -54,21 +73,24 @@ const config = { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, type: 'asset', }, - - // Add your rules for custom modules here - // Learn more about loaders from https://webpack.js.org/loaders/ + { + test: /\.html$/, + use: [ + 'html-loader', + { + loader: path.resolve(__dirname, 'inject-multiple-components-loader.js'), + options: { + components: components + } + } + ] + }, ], }, resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], }, + mode: isProduction ? 'production' : 'development' }; -module.exports = () => { - if (isProduction) { - config.mode = 'production'; - } else { - config.mode = 'development'; - } - return config; -}; +module.exports = config;