I'm trying to figure out whats wrong with my babel, webpack configuration. After build I have node_modules inside my bundle
I tried different configuration of .babel-rc, terser and awesome-typescript-loader (exclude /node_modules/) but node_modules are still inside the bundle.
"webpack": "^4.41.0",
yarn run clean-dist && webpack -p --config=webpack/prod.js --env.production
mode: 'production',
entry: './index.tsx',
output: {
filename: 'js/menu.min.js',
path: resolve(__dirname, '../dist'),
publicPath: '/static/',
},
module: {
rules: [{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
plugins: env.production ? [] : ["react-hot-loader/babel"]
}
}, 'source-map-loader'],
exclude: [/node_modules/],
},
{
test: /\.(tsx|ts)?$/,
use: [{
loader: 'babel-loader',
options: {
plugins: env.production ? [] : ["react-hot-loader/babel"]
}
},
{
loader: 'awesome-typescript-loader',
options: {
useBabel: true,
babelCore: "@babel/core"
}
}],
exclude: [/node_modules/]
},
},
plugins: [
new Dotenv({
path: './environment/' + (env.production ? 'prod' : 'dev') + '.env',
defaults: './environment/dev.env',
silent: false
}),
new CheckerPlugin(),
new HtmlWebpackPlugin({
template: 'index.html.ejs',
})
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
cache: './.build_cache/terser',
exclude: [/node_modules/],
parallel: true,
terserOptions: {
ecma: 5,
compress: true,
output: {
comments: false,
beautify: false
}
}
})
]
}
.babelrc
{
"presets": [
["@babel/preset-env", {"modules": false}],
"@babel/preset-react"
],
"env": {
"production": {
"presets": ["@babel/preset-env", "minify"]
},
"test": {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
}
}
.tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"lib": ["es5", "es6", "dom"]
},
"include": [
"./src/**/*"
],
"awesomeTypescriptLoaderOptions": {
"reportFiles": [
"./src/**/*"
]
}
}
https://i.sstatic.net/kAmT8.png
I expect the bundle with be without node_modules
When you do a:
import sth from 'sth';
and use Webpack - the code from sth
will be in your bundle or in some chunk. This is a good thing.
exclude
does not mean that it will not be included - it means that the loader will not process it.
If you want your vendors (node_modules
) in a seperate chunk - you can use a vendor chunk.
If you want to tell Webpack that it should not bundle a dependency - you can use externals.