{"id":22443105,"url":"https://github.com/riversun/npm_webpack4_bootstrap4","last_synced_at":"2026-04-12T18:36:50.390Z","repository":{"id":43560615,"uuid":"209989318","full_name":"riversun/npm_webpack4_bootstrap4","owner":"riversun","description":"Example project for bootstrap4 with webpack4","archived":false,"fork":false,"pushed_at":"2023-01-04T10:58:42.000Z","size":1100,"stargazers_count":0,"open_issues_count":18,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T10:19:34.052Z","etag":null,"topics":["bootstrap","bootstrap4","npm","webpack","webpack4"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riversun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-21T13:24:51.000Z","updated_at":"2021-08-31T03:20:00.000Z","dependencies_parsed_at":"2023-02-02T09:32:45.452Z","dependency_job_id":null,"html_url":"https://github.com/riversun/npm_webpack4_bootstrap4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/riversun/npm_webpack4_bootstrap4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fnpm_webpack4_bootstrap4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fnpm_webpack4_bootstrap4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fnpm_webpack4_bootstrap4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fnpm_webpack4_bootstrap4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riversun","download_url":"https://codeload.github.com/riversun/npm_webpack4_bootstrap4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fnpm_webpack4_bootstrap4/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264504967,"owners_count":23618871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap4","npm","webpack","webpack4"],"created_at":"2024-12-06T02:22:33.157Z","updated_at":"2026-04-12T18:36:45.349Z","avatar_url":"https://github.com/riversun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple npm project for bootstrap 4\n\nExample Bootstrap4 project with npm and webpack4\n\n## How to run it\n\nType npm start to start building and opening index.html\n\n```shell\nnpm start\n```\n\n![image](https://user-images.githubusercontent.com/11747460/65374306-80d9c680-dcc3-11e9-9272-c935dde8fd43.png)\n\n## package.json\n\n```json\n{\n  \"name\": \"npm_webpack4_bootstrap4\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"webpack-dev-server\",\n    \"start:dev\": \"webpack-dev-server\",\n    \"start:prd\": \"set NODE_ENV=test\u0026\u0026webpack-dev-server --config webpack.config.js --mode production\",\n    \"build:dev\": \"webpack --config webpack.config.js\",\n    \"build:prd\": \"set NODE_ENV=test\u0026\u0026webpack --config webpack.config.js --mode production\"\n  },\n  \"author\": \"Tom Misawa \u003criversun.org@gmail.com\u003e (https://github.com/riversun)\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/riversun/npm_webpack4_bootstrap4.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/riversun/npm_webpack4_bootstrap4/issues\"\n  },\n  \"homepage\": \"https://github.com/riversun/npm_webpack4_bootstrap4#readme\",\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.6.0\",\n    \"@babel/preset-env\": \"^7.6.0\",\n    \"babel-loader\": \"^8.0.6\",\n    \"core-js\": \"^3.2.1\",\n    \"css-loader\": \"^3.2.0\",\n    \"mini-css-extract-plugin\": \"^0.8.0\",\n    \"node-sass\": \"^4.12.0\",\n    \"sass-loader\": \"^8.0.0\",\n    \"style-loader\": \"^1.0.0\",\n    \"url-loader\": \"^2.1.0\",\n    \"webpack\": \"^4.40.2\",\n    \"webpack-cli\": \"^3.3.9\",\n    \"webpack-dev-server\": \"^3.8.1\"\n  },\n  \"dependencies\": {\n    \"bootstrap\": \"^4.3.1\",\n    \"jquery\": \"^3.4.1\",\n    \"popper.js\": \"^1.15.0\"\n  }\n}\n\n\n```\n\n## index.js\n\n```js\nimport \"bootstrap\";\nimport \"./index.scss\";\n\n\n```\n\n## index.scss\n\n```scss\n// padding for fixed nav-bar\nbody {\n  padding-top: 70px;\n}\n\n// padding for tab content\n.tab-content {\n  background-color: transparent;\n  padding-top: 10px;\n}\n\n//customize bootstrap theme\n$theme-colors: (\n        dark: #999999\n);\n\n//import boostrap's scss\n@import \"~bootstrap/scss/bootstrap.scss\";\n```\n\n## webpack.config.js\n\n```js\nconst packageJson = require('./package.json');\nconst version = packageJson.version;\nconst path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst TerserPlugin = require('terser-webpack-plugin');\nconst webpack = require('webpack');\n\nmodule.exports = (env, argv) =\u003e {\n\n    const conf = {\n        mode: 'development',\n        devServer: {\n            open: true,\n            openPage: 'index.html',\n            contentBase: path.join(__dirname, 'public'),\n            watchContentBase: true,\n            port: 8080,\n            host: argv.mode === 'production' ? `localhost` : `localhost`,// 0.0.0.0\n            disableHostCheck: true,\n        },\n        entry: {app: './src/index.js'},\n        output: {\n            path: path.join(__dirname, 'dist'),\n            publicPath: '/js/',\n            filename: argv.mode === 'production' ? `[name].js` : `[name].js`,  //`[name].min.js`\n            library: ['com', 'example'],\n            libraryTarget: 'umd'\n        },\n\n        optimization: {\n            minimizer: [new TerserPlugin({\n                //extractComments: true,\n                //cache: true,\n                //parallel: true,\n                //sourceMap: true,\n                terserOptions: {\n                    compress: {\n                        drop_console: true,\n                    },\n                }\n\n            })],\n        },\n        module: {\n            rules: [\n                {\n                    test: /\\.js$/,\n                    exclude: /(node_modules|bower_components)/,\n                    use: [\n                        {\n                            loader: 'babel-loader',\n                            options: {\n                                presets: [\n                                    [\n                                        '@babel/preset-env',\n                                        {\n                                            'modules': 'false',//commonjs,amd,umd,systemjs,auto\n                                            'useBuiltIns': 'usage',\n                                            'targets': '\u003e 0.25%, not dead',\n                                            'corejs': 3\n                                        }\n                                    ]\n                                ]\n                            }\n                        }\n                    ],\n                },\n                {\n                    test: /\\.(sa|sc|c)ss$/,\n                    use: [\n                        {\n                            loader: MiniCssExtractPlugin.loader,\n                            options: {\n                                hmr: process.env.NODE_ENV === 'development',\n                            },\n                        },\n                        'css-loader',\n                        'sass-loader',\n                    ],\n                },\n                {\n                    test: /\\.css$/,\n                    use: [\n                        {loader: 'style-loader'},\n                        {loader: 'css-loader'},\n                    ]\n                },\n                {\n                    test: /\\.(png|jpg|gif)$/i,\n                    use: [\n                        {loader: 'url-loader'},\n                    ]\n                },\n            ],\n\n        },\n        resolve: {\n            alias: {}\n        },\n        plugins: [\n            new webpack.BannerPlugin(`[name] v${version} Copyright (c) 2019 Your Name`),\n            new webpack.ProvidePlugin({\n                $: 'jquery',\n                jQuery: \"jquery\",\n                'window.jQuery': 'jquery'\n            }),\n            new MiniCssExtractPlugin({\n                filename: argv.mode === 'production' ? `[name].css` : `[name].css`,  //`[name].min.js`\n            }),\n        ],\n\n    };\n\n    if (argv.mode !== 'production') {\n        conf.devtool = 'inline-source-map';\n    }\n\n    return conf;\n\n};\n\n```\n## npm modules\n\nYou can install npm modules manually.\n\n```shell\nnpm install --save-dev @babel/core @babel/preset-env babel-loader css-loader style-loader url-loader mini-css-extract-plugin node-sass sass-loader webpack webpack-cli webpack-dev-server\nnpm install bootstrap jquery popper.js\nnpm install core-js@3 regenerator-runtime \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friversun%2Fnpm_webpack4_bootstrap4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friversun%2Fnpm_webpack4_bootstrap4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friversun%2Fnpm_webpack4_bootstrap4/lists"}