#webpack #bundle
#webpack #пакет
Вопрос:
У меня есть несколько конфигураций webpack с разными точками входа для создания разных пакетов, и некоторые из них используют некоторые модули. Я пытаюсь настроить дерево неиспользуемых экспортных данных, но при следующей настройке мои пакеты в конечном итоге содержат ВСЕ экспортные данные внутри, из каждого возможного модуля, хотя большинство из них нигде не импортированы. Что я делаю не так?
‘index.ts’ используется в качестве примера для одной из этих точек входа.
структура папок:
src/
/shared-modules
...
index.ts
other.ts
...
webpack.config.js:
{
entry: {
index: './src/index.ts',
},
output: {
path: path.resolve(__dirname, `dist/${ env }`),
filename: 'index.js'
},
module: {
rules: [
{
test:/.ts$/i,
include: path.resolve(__dirname, 'src'),
use: ['babel-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js']
},
mode: 'production',
optimization: {
usedExports: true,
minimize: true,
minimizer: [
new TerserPlugin()
]
}
}
}
.babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
tsconfig.json:
{
"files": [
"src/index.ts",
"src/other.ts"
],
"compilerOptions": {
"module": "ES6",
"moduleResolution": "Node",
"target": "ES5",
"sourceMap": true,
"lib": ["ES2015", "ES2017", "DOM"]
},
"exclude": [
"node_modules"
]
}
package.json:
{
"name": "script",
"type": "commonjs",
...
"sideEffects": [
"./src/index.ts"
],
...
}
Комментарии:
1. Ваша конфигурация выглядит правильно, поэтому можете ли вы привести пример, неиспользуемый экспорт которого не удален?
Ответ №1:
Возможно, вам потребуется настроить побочные эффекты в вашем package.json. например:
{
"name": "your-project",
"sideEffects": false
}
Однако, если в вашем коде были какие-то побочные эффекты, вместо этого можно предоставить массив:
{
"name": "your-project",
"sideEffects": ["./src/some-side-effectful-file.js"]
}