Webpack Example: Difference between revisions

From bibbleWiki
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!')
  }
}