Skip to content

Instantly share code, notes, and snippets.

@evenstensberg
Created April 22, 2020 13:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evenstensberg/ef8ed4c591371fbee8e6a9b652c6612c to your computer and use it in GitHub Desktop.
Save evenstensberg/ef8ed4c591371fbee8e6a9b652c6612c to your computer and use it in GitHub Desktop.
Example webpack configuration
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isDev = true;
const isHmr = process.env.NODE_ENV === "hmr";
module.exports = {
devtool: "inline-source-map",
entry: {
main: "./lib/index.js"
},
mode: "production",
output: {
path: path.join(__dirname, "..", "public"),
filename: "js/[name].bundle.[hash].js",
chunkFilename: "chunks/[name].chunk.[hash].js"
},
module: {
rules: [
{
test: /\.(jpg|jpeg|png|gif|svg|pdf|ico)$/,
use: [
{
loader: "file-loader",
options: {
name: "[path][name]-[hash:8].[ext]"
}
}
]
},
{
test: /\.css$|sass$|\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isHmr,
reloadAll: isHmr
}
},
{
loader: "css-loader",
options: {
sourceMap: isDev
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDev
}
}
]
},
{
test: /\.svg$/,
use: [
{
loader: "svg-inline-loader",
options: {
limit: 10 * 1024,
noquotes: true
}
},
{
loader: "url-loader",
options: {
limit: 10 * 1024
}
},
{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
outputPath: "images/",
emitFile: false
}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].bundle.[hash].css",
chunkFilename: "chunks/[id].chunk.[hash].css"
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment