I have my own ui library setup with webpack(v5.75.0
) as the bundler. When it's built, all the exported components from src/index.ts
(specified as entry file in webpack.config.js
) are getting eliminated.
As a webpack newbie, it feels like tree shaking is happening although I actually want to export all of the components even if not used internally in the UI library package.
Here're the src/index.ts
and webpack.config.js
. I'd appreciate any pointers. Thanks in advance.
src/index.ts
export * from './componentA';
export * from './componentB';
webpack.config.js
module.exports = {
entry: ['./src/index.ts'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.ts(x)?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'postcss-loader',
],
},
{
test: /\.svg$/i,
issuer: /\.tsx?$/,
use: ['@svgr/webpack', 'file-loader'],
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
],
},
devServer: {
static: {
directory: './dist',
},
},
plugins: [
new CopyPlugin({
patterns: [{ from: 'src/assets' }],
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
},
};