michael/webpack-base
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some comments

Browse Source
This commit is contained in:
Michael Peters 2023-01-09 16:01:59 -08:00
parent 1bc2a1a8ce
commit 59e2855fd1
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webpack.config.js
View File

@ -6,11 +6,14 @@ function relpath(fp) {
} }
module.exports = { module.exports = {
mode: 'production', // note: production disables the in-memory cache
mode: 'development', // 'production',
entry: { entry: {
index: relpath('src/index.js'), index: relpath('src/index.js'),
}, },
// enable source mapping (disable for much smaller files)
devtool: 'inline-source-map', devtool: 'inline-source-map',
// auto-generate index.html file with webpack bundles
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'Example Webapp', title: 'Example Webapp',
@ -26,8 +29,9 @@ module.exports = {
static: relpath('dist'), static: relpath('dist'),
}, },
optimization: { optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single', runtimeChunk: 'single',
// enable caching with vendors in a seperate chunk
moduleIds: 'deterministic',
splitChunks: { splitChunks: {
cacheGroups: { cacheGroups: {
vendor: { vendor: {
@ -40,23 +44,26 @@ module.exports = {
}, },
performance: { performance: {
// hides the performance warnings for now // hides the performance warnings for now
// TODO: proper code splitting // these are especially apparent with source maps enabled
hints: false, hints: false,
}, },
module: { module: {
rules: [ rules: [
// sass support with `import './styles.scss'` // sass support with `import './styles.scss'`
{ {
include: relpath('src'),
test: /\.s[ac]ss$/i, test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'], use: ['style-loader', 'css-loader', 'sass-loader'],
}, },
// css support with `import './styles.css'` // css support with `import './styles.css'`
{ {
include: relpath('src'),
test: /\.css$/i, test: /\.css$/i,
use: ['style-loader', 'css-loader'], use: ['style-loader', 'css-loader'],
}, },
// image support with `import Image from './image.png'` // image support with `import Image from './image.png'`
{ {
include: relpath('src'),
test: /\.(png|svg|jpg|jpeg|gif)$/i, test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource', type: 'asset/resource',
}, },