Bundling
We want to better tie together the dependencies (files that are related to one another).
pathinfo
on require-everything branch
// **** webpack.config.babel.js ****
/* eslint no-console:"off" */
const {resolve} = require('path')
const webpackValidator = require('webpack-validator')
const {getIfUtils} = require('webpack-config-utils')
module.exports = env => {
// 1. ++++ get ifNotProd
const {ifProd, ifNotProd} = getIfUtils(env)
const config = webpackValidator({
context: resolve('src'),
entry: './bootstrap.js',
output: {
filename: 'bundle.js',
path: resolve('dist'),
publicPath: '/dist/',
// 2. ++++ pathinfo
pathinfo: ifNotProd(),
},
devtool: ifProd('source-map', 'eval'),
})
if (env.debug) {
console.log(config)
debugger // eslint-disable-line
}
return config
}
This helps with debugging. Webpack will add a little comment to your bundle file that tells you the name of the file it's requiring. Otherwise it will be just a number that is not very human readable (it's using its own require system that relies on ids to identify modules to save space).