├── .gitignore
├── README.md
├── dist
├── index.html
└── main.bundle.js
├── package-lock.json
├── package.json
├── src
├── index.html
├── index.js
└── style.css
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack-setup
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Wbpack Exercise
7 |
8 |
9 | Hello webpack!
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-setup",
3 | "version": "1.0.0",
4 | "description": "",
5 | "private": true,
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack serve --open",
9 | "build": "webpack"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/QueenterJuma/Webpack-setup.git"
14 | },
15 | "keywords": [],
16 | "author": "",
17 | "license": "ISC",
18 | "bugs": {
19 | "url": "https://github.com/QueenterJuma/Webpack-setup/issues"
20 | },
21 | "homepage": "https://github.com/QueenterJuma/Webpack-setup#readme",
22 | "devDependencies": {
23 | "css-loader": "^6.7.3",
24 | "html-webpack-plugin": "^5.5.0",
25 | "style-loader": "^3.3.1",
26 | "webpack": "^5.75.0",
27 | "webpack-cli": "^5.0.1",
28 | "webpack-dev-server": "^4.11.1"
29 | },
30 | "dependencies": {
31 | "lodash": "^4.17.21"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Wbpack Exercise
7 |
8 |
9 | Hello webpack!
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import './style.css'
3 | function component() {
4 | const element = document.createElement('div');
5 |
6 | // Lodash, now imported by this scrip
7 | element.innerHTML = _.join(['Hello', 'webpack'], ' ');
8 | element.classList.add('hello');
9 |
10 | return element;
11 | }
12 |
13 | document.body.appendChild(component());
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: bisque;
3 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
3 |
4 | module.exports = {
5 | entry: './src/index.js',
6 | mode: 'development',
7 | output: {
8 | filename: 'main.js',
9 | path: path.resolve(__dirname, 'dist'),
10 | },
11 | devtool: 'inline-source-map',
12 | devServer: {
13 | static: './dist',
14 | },
15 | plugins: [
16 | new HtmlWebpackPlugin({
17 | template: './src/index.html',
18 | }),
19 | ],
20 | output: {
21 | filename: '[name].bundle.js',
22 | path: path.resolve(__dirname, 'dist'),
23 | clean: true,
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.css$/i,
29 | use: ['style-loader', 'css-loader'],
30 | },
31 | ],
32 | },
33 | optimization: {
34 | runtimeChunk: 'single',
35 | },
36 | };
37 |
--------------------------------------------------------------------------------