Skip to content

Instantly share code, notes, and snippets.

@subfighter3
Forked from sarahcssiqueira/webpack dependencies
Created February 26, 2024 02:28
Show Gist options
  • Save subfighter3/91666472f5a499f7ad7e8458f06d57cd to your computer and use it in GitHub Desktop.
Save subfighter3/91666472f5a499f7ad7e8458f06d57cd to your computer and use it in GitHub Desktop.
webpack.config.js for WordPress projects
{
"devDependencies": {
"@babel/cli": "^7.22.9",
"@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.7.6",
"sass-loader": "^13.3.2",
"terser-webpack-plugin": "^5.3.9",
"webpack": "^5.86.0",
"webpack-cli": "^5.1.4"
}
/**
* Webpack configuration.
*/
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserJsPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin= require("copy-webpack-plugin");
const JS_DIR = path.resolve(__dirname, "assets/js");
const IMG_DIR = path.resolve(__dirname, "assets/img");
const BUILD_DIR = path.resolve(__dirname, "build");
const entry = {
main: JS_DIR + "/index.js",
};
const output = {
path: BUILD_DIR,
filename: "js/[name].js",
};
const plugins = (argv) => [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: "production" === argv.mode,
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new CopyPlugin({
patterns: [{ from: IMG_DIR, to: BUILD_DIR + "/img" }],
}),
];
const rules = [
{
test: /\.(?:js|mjs|cjs)$/,
include: [JS_DIR],
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [["@babel/preset-env", { targets: "defaults" }]],
},
},
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg|svg|jpeg|gif|ico)$/,
use: {
loader: "file-loader",
options: {
name: "[path][name].[ext]",
publicPath: "production" === process.env.NODE_ENV ? "../" : "../../",
},
},
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: [IMG_DIR, /node_modules/],
use: {
loader: "file-loader",
options: {
name: "[path][name].[ext]",
publicPath: "production" === process.env.NODE_ENV ? "../" : "../../",
},
},
},
];
module.exports = (env, argv) => ({
entry,
output,
devtool: "source-map",
module: {
rules,
},
optimization: {
minimizer: [new CssMinimizerPlugin(), new TerserJsPlugin()],
minimize: true,
},
plugins: plugins(argv),
externals: {},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment