├── README.md ├── .gitignore ├── src ├── index.js ├── style.css └── index.html ├── webpack.config.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # webPack 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | console.log("Welcome") -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: bisque; 3 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wbpack Exercise 8 | 9 | 10 | 11 |

Hello webpack!

12 | 13 | 14 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | mode: "development", 6 | entry: "./src/index.js", 7 | output: { 8 | filename: "main.js", 9 | path: path.resolve(__dirname, "dist") 10 | }, 11 | plugins: [ 12 | new HtmlWebpackPlugin({ 13 | title: 'Output Management', 14 | template: "./src/index.html" 15 | }) 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.css$/, 21 | use: ["style-loader", "css-loader"] 22 | } 23 | ] 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --config webpack.config.js --open", 8 | "build": "webpack --config webpack.config.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "css-loader": "^6.8.1", 15 | "html-webpack-plugin": "^5.5.1", 16 | "style-loader": "^3.3.3", 17 | "webpack": "^5.85.1", 18 | "webpack-cli": "^5.1.3", 19 | "webpack-dev-server": "^4.15.0", 20 | "webpack-merge": "^5.9.0" 21 | } 22 | } --------------------------------------------------------------------------------