Skip to content

Instantly share code, notes, and snippets.

@shirbr510

shirbr510/webpack.common.js

Created July 15, 2021 08:19
Show Gist options
  • Save shirbr510/b38f90d53305d35b6495c0a7e7b9ac74 to your computer and use it in GitHub Desktop.
Save shirbr510/b38f90d53305d35b6495c0a7e7b9ac74 to your computer and use it in GitHub Desktop.
Download ZIP
source-map inaccuracy reproduction (Outplayed)
Raw
webpack.common.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const packageJson = require("./package.json");
const backgroundScripts = [
// list of scripts, all origin @ ./src
];
const indexScripts = [
// list of scripts, all origin @ ./src
];
const indexCss = [
// list of scss files, all origin @ ./scss
];
const inGameNotificationScripts = [
// list of scripts, all origin @ ./src
];
const inGameNotificationCss = [
// list of scss files, all origin @ ./scss
];
module.exports = {
entry: {
// Vendor: a common chunk that includes all of our dependencies
vendor: Object.keys(packageJson.dependencies),
backgroundScripts,
indexScripts,
inGameNotificationScripts,
indexCss,
inGameNotificationCss,
background: "./src/windows/background/background.js",
index: "./src/windows/index/index.js",
inGameNotification: "./src/windows/inGameNotification/inGameNotification.js"
},
output: {
filename: "[name].js",
path: `${__dirname}/dist`
},
devtool: "source-map",
plugins: [
new HtmlWebpackPlugin({
hash: true,
scriptLoading: "blocking",
chunks: ["vendor", "backgroundScripts", "background"],
template: "./src/windows/background/background.ejs",
filename: "./background.html" // Relative to root of the application
}),
new HtmlWebpackPlugin({
hash: true,
scriptLoading: "blocking",
chunks: ["vendor", "indexCss", "indexScripts", "index"],
template: "./src/windows/index/index.ejs",
filename: "./index.html" // Relative to root of the application
}),
new HtmlWebpackPlugin({
hash: true,
scriptLoading: "blocking",
chunks: ["vendor", "inGameNotificationCss", "inGameNotificationScripts", "inGameNotification"],
template: "./src/windows/inGameNotification/inGameNotification.ejs",
filename: "./inGameNotification.html" // Relative to root of the application
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
{
loader: "sass-loader",
options: {
sassOptions: {
outputStyle: "compressed"
}
}
}
]
},
{
// Images
test: /\.(png|svg|webp|ico)$/i,
type: "asset/resource"
},
{
// Fonts
test: /\.(woff2)$/i,
type: "asset/resource"
},
{
// Plugins & html
test: /\.(dll|html)$/i,
type: "asset/resource"
}
]
}
};
Raw
webpack.dev.js
const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devServer: {
contentBase: "./dist"
}
});
Raw
webpack.prod.js
const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "production"
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment