For a large project, I am looking to break it down into multiple package.json files. This way, the dependencies for each part can be clearly defined and exported as separate entities.
However, my goal is to compile all of these packages using webpack and babel in one app without simply outputting them to a /dist folder since there are shared dependencies among the packages.
The envisioned directory structure is as follows:
\main
\app
\node_modules
package.json
\package1
package.json
node_modules
index.js
\package2
package.json
node_modules
index.js
I have tried various methods:
- Attempting to use webpack's resolve modules with
path.resolve('app'). Despite its theoretical feasibility, this method has proven ineffective. - Utilizing the main package.json file to reference others via
"package1" : "file:../package1". However, this approach fails to recognize package1 as ES6 JavaScript, resulting in errors. Even configuring resolveLoaders in the webpack setup does not resolve the issue.
The current webpack configuration is outlined as follows:
module: {
loaders: [
{
test: /\.js?/,
loader: 'babel-loader',
include: [
path.resolve('app'),
path.resolve('../prose'),
],
query: {
plugins: [
['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
}]
}],
['transform-object-assign']
]
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.svg$/, loader: 'file-loader' },
{ test: /\.png$/, loader: 'file-loader' },
{ test: /\.jpg$/, loader: 'file-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
modules: [
path.resolve('app'),
'node_modules',
],
extensions: ['.json', '.js', '.jsx'],
}
If you have any insights or examples of similar projects successfully implementing this strategy, please share!