虽然 Babel 本身不支持摇树优化,但可以通过使用 Babel 插件来实现。其中,最常用的插件是 babel-preset-env,该插件会根据你所指定的目标浏览器或运行时环境,自动选择所需的转换和插件,从而实现优化和最小化输出。
以下是示例代码:
// webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: ['last 2 versions', 'safari >= 7']
}
}
]
]
}
}
}
]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
在上面的示例中,我们使用了 babel-loader 和 babel-preset-env 插件来实现摇树优化。其中,@babel/preset-env 插件指定了目标浏览器或运行时环境,从而能够自动选择所需的转换和插件。同时,我们还加入了 webpack.optimize.ModuleConcatenationPlugin 插件来实现模块合并,从而进一步减小输出文件的大小。