As I understand, webpack-merge helps us break down our webpack.config file into more manageable chunks, adding configuration relevant to the environment.
While we will separate the production and development specific bits out, note that we'll still maintain a "common" configuration to keep things DRY. In order to merge these configurations together, we'll use a utility called webpack-merge. With the "common" configuration in place, we won't have to duplicate code within the environment-specific configurations.
- Webpack - production
My code in my webpack.prod.js
is like so:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
exclude: [
path.resolve(__dirname, "node_modules") //NEED TO ACCCESS PATH VARIABLE HERE
]
}
]
}
In my webpack.common.js
is the variable path
in which I thought webpack.prod.js
has access to. I'm assuming it doesn't as I am presented with an error:
ReferenceError: path is not defined
Question
How do I access the common configuration? Have I misunderstood the concept of webpack-merge
?
webpack-merge
will take two js objects and merge them using lodash
mergeWith. So basically its returning a object which contains properties of both objects.
It cant provide with you path
variable or any other variable. You will need to implicitely import it in your webpack.prod.js
file.