Webpack Example: Difference between revisions
Jump to navigation
Jump to search
Line 4: | Line 4: | ||
For me I divided this up in the following way<br> | For me I divided this up in the following way<br> | ||
[[file:Webpack_structure.png]] | [[file:Webpack_structure.png]] | ||
=webpack.config.js= | |||
This essentially handles the merge of the other files. I added to parameters for, which environment and whether to show the webvitals report. | |||
<syntaxhighlight lang="js"> | |||
import { merge } from 'webpack-merge' | |||
import { commonConfig } from './webpack.config.common.js' | |||
import { devConfig } from './webpack.config.dev.js' | |||
import { prodConfig } from './webpack.config.prod.js' | |||
export default ({ env, withReport }) => { | |||
console.log(`Building for ${env} environment...`) | |||
switch (env) { | |||
case 'development': | |||
return merge(commonConfig(env, withReport), devConfig(process.env.SSL_KEY_FILE, process.env.SSL_CRT_FILE)) | |||
case 'production': | |||
return merge(commonConfig(env, withReport), prodConfig) | |||
default: | |||
throw new Error('No matching configuration was found!') | |||
} | |||
} | |||
</syntaxhighlight> |
Revision as of 23:20, 12 December 2024
Introduction
This page is about webpack which I guess is quite old. I wanted to capture what I learned when I used it.
Structure of the Code
For me I divided this up in the following way
webpack.config.js
This essentially handles the merge of the other files. I added to parameters for, which environment and whether to show the webvitals report.
import { merge } from 'webpack-merge'
import { commonConfig } from './webpack.config.common.js'
import { devConfig } from './webpack.config.dev.js'
import { prodConfig } from './webpack.config.prod.js'
export default ({ env, withReport }) => {
console.log(`Building for ${env} environment...`)
switch (env) {
case 'development':
return merge(commonConfig(env, withReport), devConfig(process.env.SSL_KEY_FILE, process.env.SSL_CRT_FILE))
case 'production':
return merge(commonConfig(env, withReport), prodConfig)
default:
throw new Error('No matching configuration was found!')
}
}