├── .gitignore ├── postcss.config.js ├── src ├── assets │ └── images │ │ ├── logo.png │ │ ├── logo.jpeg │ │ └── webpack.gif ├── app │ ├── header.js │ └── footer.ts ├── index.js ├── styles │ └── scss │ │ └── main.scss └── index.html ├── config ├── webpack.dev.config.js ├── webpack.prod.config.js └── webpack.common.config.js ├── webpack.config.js ├── tsconfig.json ├── readme.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .git/ 3 | node_modules/ 4 | .vscode 5 | dist/ 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thejsdeveloper/webpack4-setup/HEAD/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thejsdeveloper/webpack4-setup/HEAD/src/assets/images/logo.jpeg -------------------------------------------------------------------------------- /src/assets/images/webpack.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thejsdeveloper/webpack4-setup/HEAD/src/assets/images/webpack.gif -------------------------------------------------------------------------------- /config/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const webpackBaseConfig = require('./webpack.common.config.js') 3 | 4 | module.exports = merge(webpackBaseConfig, {}) 5 | -------------------------------------------------------------------------------- /src/app/header.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export class Header { 4 | constructor() { 5 | console.log(`This is header constructor`); 6 | } 7 | 8 | getFirstHeading() { 9 | return `Webpack Starter page`; 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const environment = (process.env.NODE_ENV || 'development').trim(); 2 | 3 | if (environment === 'development') { 4 | module.exports = require('./config/webpack.dev.config.js'); 5 | } else { 6 | console.log('In PROD') 7 | module.exports = require('./config/webpack.prod.config.js'); 8 | } -------------------------------------------------------------------------------- /src/app/footer.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export class Footer { 4 | 5 | footertext: string; 6 | 7 | constructor() { 8 | console.log(`This is Footer constructor`); 9 | this.footertext = `Demo for webpack 4 set up`; 10 | } 11 | 12 | getFooterText(): string { 13 | return this.footertext 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /config/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 3 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 4 | const webpackBaseConfig = require('./webpack.common.config.js'); 5 | 6 | 7 | module.exports = merge(webpackBaseConfig, { 8 | optimization: { 9 | minimizer: [ 10 | new UglifyJsPlugin(), 11 | new OptimizeCSSAssetsPlugin() 12 | ] 13 | } 14 | }) -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import '@scss/main.scss' 2 | 3 | import { Header } from '@/app/header'; 4 | import { Footer } from '@/app/footer'; 5 | import webpackgif from '@img/webpack.gif'; 6 | 7 | document.getElementById('webpack-gif').setAttribute('src', webpackgif) 8 | 9 | console.log(`***Header******`); 10 | let header = new Header(); 11 | let firstHeading = header.getFirstHeading(); 12 | console.log(firstHeading); 13 | 14 | console.log(`***footer******`); 15 | let footer = new Footer(); 16 | let footerText = footer.getFooterText(); 17 | console.log(footerText); -------------------------------------------------------------------------------- /src/styles/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import '../../../node_modules/bootstrap/scss/bootstrap.scss'; 2 | 3 | body { 4 | height: 100vh; 5 | display: flex; 6 | flex-direction: column; 7 | background-color: #f7f9fd; 8 | } 9 | 10 | 11 | header { 12 | color: #fff; 13 | height: 70px; 14 | user-select: none; 15 | 16 | .logo { 17 | width: 40px; 18 | height: 40px; 19 | } 20 | } 21 | 22 | footer { 23 | height: 50px; 24 | } 25 | 26 | main { 27 | display: flex; 28 | flex: 1; 29 | align-items: center; 30 | justify-content: center; 31 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // Target latest version of ECMAScript. 4 | "target": "esnext", 5 | // Search under node_modules for non-relative imports. 6 | "moduleResolution": "node", 7 | // Process & infer types from .js files. 8 | "allowJs": true, 9 | // Don't emit; allow Babel to transform files. 10 | "noEmit": true, 11 | // Enable strictest settings like strictNullChecks & noImplicitAny. 12 | "strict": true, 13 | // Disallow features that require cross-file information for emit. 14 | "isolatedModules": false, 15 | // Import non-ES modules as default imports. 16 | "esModuleInterop": true, 17 | "baseUrl": ".", 18 | "paths": { 19 | "@components": [ "src/components" ], 20 | "@scss": [ "src/styles/scss" ], 21 | "@img": [ "src/assets/images" ], 22 | "@": [ "src" ], 23 | } 24 | }, 25 | "include": [ 26 | "src" 27 | ] 28 | } 29 | 30 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Let's Start with Webpack 4 2 | ### Webpack configuration introduction 3 | 4 | ![](https://raw.githubusercontent.com/thejsdeveloper/webpack4-setup/master/src/assets/images/webpack.gif) 5 | 6 | ## This project provide following functionality: 7 | 1. Webpack configuration for development and production 8 | 2. Transpile .ts and ES6+ to ES5 9 | 3. Convert SCSS to CSS 10 | 4. Managing static resources 11 | 5. Use of different plugins in Webpack 12 | 13 | ### To clone the repository 14 | > Run `git clone https://github.com/thejsdeveloper/webpack4-setup.git` 15 | 16 | ### Change directory 17 | > cd `webpack4-setup` 18 | 19 | ### Install dependencies 20 | > npm install 21 | 22 | ### Run development server 23 | 24 | > Run `npm run dev` for a dev server. Navigate to `http://localhost:8080/`. 25 | The app will automatically reload if you change any of the source files. 26 | 27 | ### Build 28 | 29 | > Run `npm run build:dev` to build the project in development mode. 30 | > Run `npm run build:prod` to build the project in production mode. 31 | 32 | The build artifacts will be stored in the `dist/` directory. 33 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 22 | 23 |
24 |
25 | 26 | webpack-gif 27 | 28 |
29 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-starter", 3 | "version": "1.0.0", 4 | "description": "This is a starter for traspiling scss and ES6+ to css and Javascript via webpack 4", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:dev": "cross-env NODE_ENV=development webpack --mode development", 8 | "build:prod": "cross-env NODE_ENV=production webpack --mode production", 9 | "start": "webpack-dev-server --mode development", 10 | "typecheck": "tsc" 11 | }, 12 | "author": "Vikas yadav", 13 | "license": "MIT", 14 | "dependencies": { 15 | "bootstrap": "^4.4.1" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.8.4", 19 | "@babel/preset-env": "^7.8.4", 20 | "@babel/preset-typescript": "^7.8.3", 21 | "autoprefixer": "^9.7.4", 22 | "babel-loader": "^8.3.0", 23 | "clean-webpack-plugin": "^3.0.0", 24 | "copy-webpack-plugin": "^11.0.0", 25 | "cross-env": "^7.0.0", 26 | "css-loader": "^6.7.3", 27 | "file-loader": "^6.2.0", 28 | "html-webpack-plugin": "^5.5.0", 29 | "mini-css-extract-plugin": "^2.7.2", 30 | "node-sass": "^4.13.1", 31 | "optimize-css-assets-webpack-plugin": "^5.0.3", 32 | "postcss-loader": "^7.0.2", 33 | "sass-loader": "^13.2.0", 34 | "style-loader": "^1.3.0", 35 | "typescript": "^3.7.5", 36 | "uglifyjs-webpack-plugin": "^2.2.0", 37 | "webpack": "^5.75.0", 38 | "webpack-cli": "^5.0.1", 39 | "webpack-dev-server": "^3.10.3", 40 | "webpack-merge": "^4.2.2" 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /config/webpack.common.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 6 | 7 | module.exports = { 8 | entry: './src/index', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: '[name].[chunkhash].js' 12 | }, 13 | 14 | module: { 15 | rules: [ 16 | { 17 | test: [/.js$|.ts$/], 18 | exclude: /(node_modules)/, 19 | use: { 20 | loader: 'babel-loader', 21 | options: { 22 | presets: [ 23 | '@babel/preset-env', 24 | '@babel/typescript' 25 | ] 26 | } 27 | } 28 | }, 29 | { 30 | test: [/.css$|.scss$/], 31 | use: [ 32 | MiniCssExtractPlugin.loader, 33 | 'css-loader', 34 | 'sass-loader', 35 | 'postcss-loader' 36 | ] 37 | }, 38 | { 39 | test: /\.(png|jpg|jpeg|gif|svg)$/, 40 | use: [ 41 | { 42 | loader: 'file-loader', 43 | options: { 44 | name: '[name].[ext]', 45 | outputPath: 'assets/images/' 46 | } 47 | } 48 | ] 49 | } 50 | ] 51 | }, 52 | 53 | resolve: { 54 | alias: { 55 | '@scss': path.resolve(__dirname, '../src/styles/scss'), 56 | '@img': path.resolve(__dirname, '../src/assets/images'), 57 | '@': path.resolve(__dirname, '../src') 58 | }, 59 | modules: [ 60 | 'node_modules', 61 | path.resolve(__dirname, 'src') 62 | ], 63 | extensions: ['.js', '.ts'] 64 | }, 65 | 66 | plugins: [ 67 | new HtmlWebpackPlugin({ 68 | title: 'Webpack 4 Starter', 69 | template: './src/index.html', 70 | inject: true, 71 | minify: { 72 | removeComments: true, 73 | collapseWhitespace: true 74 | } 75 | }), 76 | new MiniCssExtractPlugin({ 77 | filename: 'style.[chunkhash].css' 78 | }), 79 | new CopyWebpackPlugin([{ 80 | from: './src/assets/images', 81 | to: 'assets/images' 82 | }]), 83 | new CleanWebpackPlugin() 84 | ] 85 | } --------------------------------------------------------------------------------