Last active
March 25, 2024 21:44
-
-
Save josedaniel/047eb127580d13744a946de93443631b to your computer and use it in GitHub Desktop.
Webpack Configuration for Web Development
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const webpack = require('webpack'); | |
const ESLintPlugin = require('eslint-webpack-plugin'); | |
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); | |
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
const pk = require('./package.json'); | |
const env = String(process.env.NODE_ENV || 'development').toLowerCase(); | |
const version = String(pk.version) || '0.0.1'; | |
const babelLoader = { | |
test: /\.js$/, | |
exclude: /(node_modules)/, | |
use: { | |
loader: 'babel-loader', | |
options: { | |
plugins: [ | |
'@babel/plugin-syntax-jsx', | |
'@babel/plugin-syntax-dynamic-import' | |
], | |
presets: [ | |
'@babel/preset-env', | |
'@babel/preset-react' | |
] | |
} | |
} | |
}; | |
const styleLoader = { | |
test: /\.(s(a|c)ss)$/, | |
use: [ | |
MiniCssExtractPlugin.loader, | |
{ | |
loader: 'css-loader', | |
options: { url: false } | |
}, | |
'sass-loader' | |
] | |
}; | |
const pluginEnvironment = new webpack.EnvironmentPlugin({ | |
NODE_ENV: env, | |
VERSION: version | |
}); | |
const pluginDefineESLint = new ESLintPlugin({ | |
failOnWarning: false, | |
failOnError: false | |
}); | |
const pluginBrowserSync = new BrowserSyncPlugin({ | |
host: 'localhost', | |
port: 3000, | |
proxy: 'localhost:8082' | |
}); | |
const pluginMiniCssExtract = new MiniCssExtractPlugin({ | |
filename: 'css/[name].css' | |
}); | |
const config = { | |
mode: env, | |
stats: { | |
colors: true, | |
env: true, | |
errorDetails: true | |
}, | |
module: { | |
rules: [ | |
babelLoader, | |
styleLoader | |
] | |
}, | |
entry: { | |
app: ['./client/js/index.js', './client/scss/app.scss'] | |
}, | |
output: { | |
path: path.resolve(process.cwd(), './public/'), | |
filename: 'js/[name].js' | |
}, | |
resolve: { | |
alias: { | |
'@client': path.resolve(__dirname, './client'), | |
}, | |
modules: [ | |
'./', | |
'./node_modules/', | |
'./node_modules/foundation-sites/scss', | |
'./node_modules/hamburgers/_sass/hamburgers' | |
] | |
}, | |
devtool: env !== 'production' ? 'source-map' : undefined, | |
plugins: [ | |
pluginEnvironment, | |
pluginDefineESLint, | |
pluginBrowserSync, | |
pluginMiniCssExtract | |
] | |
}; | |
module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Webpack Configuration Explanation
This
README.md
file provides an explanation of the webpack configuration (webpack.config.js
) included in this project.Project Overview
The webpack configuration provided here is used to bundle and compile JavaScript and CSS files for a web application. It includes settings for transpiling JavaScript using Babel, handling CSS and SCSS files, and other development tools/plugins like ESLint, BrowserSync, and environment variables.
Configuration Details
Babel Loader
The
babel-loader
is configured to transpile JavaScript files using Babel. It excludes thenode_modules
directory and applies presets for ES6+ and React, along with necessary syntax plugins.Style Loader
The style loader handles CSS and SCSS files. It uses
mini-css-extract-plugin
to extract CSS into separate files. This loader includescss-loader
to interpret@import
andurl()
likeimport/require()
and resolves them, andsass-loader
to compile SCSS to CSS.Environment Variables
Webpack's
EnvironmentPlugin
is used to define environment variables. In this configuration, it setsNODE_ENV
andVERSION
based on the environment or package.json.ESLint Plugin
The
eslint-webpack-plugin
is included to integrate ESLint into the webpack build process. It checks JavaScript files for errors and enforces coding standards. This configuration disables failing on warnings or errors to avoid breaking the build.BrowserSync Plugin
The
browser-sync-webpack-plugin
is used to set up a local development server and enable live reloading. It proxies requests from the webpack development server to another server (in this case,localhost:8082
).MiniCssExtract Plugin
The
mini-css-extract-plugin
is used to extract CSS into separate files. It generates astyles.css
file in thepublic/css
directory, containing all CSS styles imported in the JavaScript files.Other Configuration Options
import
statements.source-map
in development mode for better debugging.Usage
To use this webpack configuration, follow these steps:
npm install
.npm run build
orwebpack --config webpack.config.js
to build the project.npm start
orwebpack serve --config webpack.config.js
for live reloading.