 %>)
24 |
25 |
26 | <%= require('../partials/images.html?template').default %>
27 |
24 |
25 |
26 | <%= require('../partials/images.html?template').default %>
27 | 
3 |
--------------------------------------------------------------------------------
/src/partials/nav.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
2 |
3 | module.exports = {
4 |
5 | // https://webpack.js.org/configuration/mode/
6 | mode: 'development',
7 |
8 | // This option controls if and how source maps are generated.
9 | // https://webpack.js.org/configuration/devtool/
10 | devtool: 'eval-cheap-module-source-map',
11 |
12 | // https://webpack.js.org/concepts/entry-points/#multi-page-application
13 | entry: {
14 | index: './src/page-index/main.js',
15 | about: './src/page-about/main.js',
16 | contacts: './src/page-contacts/main.js'
17 | },
18 |
19 | // https://webpack.js.org/configuration/dev-server/
20 | devServer: {
21 | port: 8080,
22 | writeToDisk: false // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
23 | },
24 |
25 | // https://webpack.js.org/concepts/loaders/
26 | module: {
27 | rules: [
28 | {
29 | // https://webpack.js.org/loaders/babel-loader/#root
30 | test: /\.m?js$/i,
31 | exclude: /node_modules/,
32 | use: {
33 | loader: 'babel-loader',
34 | options: {
35 | presets: ['@babel/preset-env']
36 | }
37 | }
38 | },
39 | {
40 | // https://webpack.js.org/loaders/css-loader/#root
41 | test: /\.css$/i,
42 | use: ['style-loader', 'css-loader']
43 | },
44 | {
45 | // https://webpack.js.org/guides/asset-modules/#resource-assets
46 | test: /\.(png|jpe?g|gif|svg)$/i,
47 | type: 'asset/resource'
48 | },
49 | {
50 | // https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
51 | resourceQuery: /raw/,
52 | type: 'asset/source'
53 | },
54 | {
55 | // https://webpack.js.org/loaders/html-loader/#usage
56 | resourceQuery: /template/,
57 | loader: 'html-loader'
58 | }
59 | ]
60 | },
61 |
62 | // https://webpack.js.org/concepts/plugins/
63 | plugins: [
64 | new HtmlWebpackPlugin({
65 | template: './src/page-index/tmpl.html',
66 | inject: true,
67 | chunks: ['index'],
68 | filename: 'index.html'
69 | }),
70 | new HtmlWebpackPlugin({
71 | template: './src/page-about/tmpl.html',
72 | inject: true,
73 | chunks: ['about'],
74 | filename: 'about.html'
75 | }),
76 | new HtmlWebpackPlugin({
77 | template: './src/page-contacts/tmpl.html',
78 | inject: true,
79 | chunks: ['contacts'],
80 | filename: 'contacts.html'
81 | })
82 | ]
83 | }
84 |
--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
5 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
6 | const TerserPlugin = require('terser-webpack-plugin')
7 |
8 | const buildPath = path.resolve(__dirname, 'dist')
9 |
10 | module.exports = {
11 |
12 | // https://webpack.js.org/configuration/mode/
13 | mode: 'production',
14 |
15 | // This option controls if and how source maps are generated.
16 | // https://webpack.js.org/configuration/devtool/
17 | devtool: 'source-map',
18 |
19 | // https://webpack.js.org/concepts/entry-points/#multi-page-application
20 | entry: {
21 | index: './src/page-index/main.js',
22 | about: './src/page-about/main.js',
23 | contacts: './src/page-contacts/main.js'
24 | },
25 |
26 | // how to write the compiled files to disk
27 | // https://webpack.js.org/concepts/output/
28 | output: {
29 | filename: '[name].[contenthash].js',
30 | path: buildPath,
31 | clean: true
32 | },
33 |
34 | // https://webpack.js.org/concepts/loaders/
35 | module: {
36 | rules: [
37 | {
38 | // https://webpack.js.org/loaders/babel-loader/#root
39 | test: /\.m?js$/i,
40 | exclude: /node_modules/,
41 | use: {
42 | loader: 'babel-loader',
43 | options: {
44 | presets: ['@babel/preset-env']
45 | }
46 | }
47 | },
48 | {
49 | // https://webpack.js.org/loaders/css-loader/#root
50 | test: /\.css$/i,
51 | use: [
52 | MiniCssExtractPlugin.loader,
53 | 'css-loader'
54 | ]
55 | },
56 | {
57 | // https://webpack.js.org/guides/asset-modules/#resource-assets
58 | test: /\.(png|jpe?g|gif|svg)$/i,
59 | type: 'asset/resource'
60 | },
61 | {
62 | // https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
63 | resourceQuery: /raw/,
64 | type: 'asset/source'
65 | },
66 | {
67 | // https://webpack.js.org/loaders/html-loader/#usage
68 | resourceQuery: /template/,
69 | loader: 'html-loader'
70 | }
71 | ]
72 | },
73 |
74 | // https://webpack.js.org/concepts/plugins/
75 | plugins: [
76 | new HtmlWebpackPlugin({
77 | template: './src/page-index/tmpl.html',
78 | inject: true,
79 | chunks: ['index'],
80 | filename: 'index.html'
81 | }),
82 | new HtmlWebpackPlugin({
83 | template: './src/page-about/tmpl.html',
84 | inject: true,
85 | chunks: ['about'],
86 | filename: 'about.html'
87 | }),
88 | new HtmlWebpackPlugin({
89 | template: './src/page-contacts/tmpl.html',
90 | inject: true,
91 | chunks: ['contacts'],
92 | filename: 'contacts.html'
93 | }),
94 | new MiniCssExtractPlugin({
95 | filename: '[name].[contenthash].css',
96 | chunkFilename: '[id].[contenthash].css'
97 | })
98 | ],
99 |
100 | // https://webpack.js.org/configuration/optimization/
101 | optimization: {
102 | minimize: true,
103 | minimizer: [
104 | // https://webpack.js.org/plugins/terser-webpack-plugin/
105 | new TerserPlugin({
106 | parallel: true
107 | }),
108 | // https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production
109 | new CssMinimizerPlugin()
110 | ]
111 | }
112 | }
113 |
--------------------------------------------------------------------------------