Skip to content

Instantly share code, notes, and snippets.

@rbk
Last active May 19, 2024 17:42
Show Gist options
  • Save rbk/1db21170746ad8e7b2a3f317963011fa to your computer and use it in GitHub Desktop.
Save rbk/1db21170746ad8e7b2a3f317963011fa to your computer and use it in GitHub Desktop.
2024 - Full webpack.config.js I am using for a side project. (to share on SO)
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: 'development',
watchOptions: {
ignored: /node_modules/,
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
include: /\/src/,
})
],
},
plugins: [],
cache: true,
devServer: {
liveReload: true,
static: {
directory: path.join(__dirname, 'public'),
},
compress: false,
port: 9000,
historyApiFallback: true,
},
stats: {all: undefined},
resolve: {
alias: {
},
},
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './src/public/bundle'),
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.(png|jpe?g|gif)$/i,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {outputPath: 'images'}
},
],
},
{
test: /\.(css|sass|scss)$/,
exclude: /node_modules/,
use: [
"style-loader",
'css-loader',
'sass-loader'
]
}
]
}
};
@rbk
Copy link
Author

rbk commented May 19, 2024

Here's my package.json too:

{
  "name": "basic-webpack-ui",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "query-string": "^4.3.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-helmet": "^6.1.0",
    "react-markdown": "^9.0.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.23.1"
  },
  "scripts": {
    "start": "webpack serve --progress"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.24.3",
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "@testing-library/react": "^9.3.2",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.1",
    "node-sass": "9.0.0",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment