关于 webpack4 的 webpack.ProvidePlugin 结合 treeshaking 的问题?

发布于 2022-09-11 17:43:40 字数 1321 浏览 20 评论 0

我的配置文件是这样的,按照 官方指南 的方法,提供了 ['lodash-es','chunk'] 的数组形式的参数值,但是为什么还是将整个 lodash 打包了,我期望的是只打包 lodashchunk 方法,请问这是怎么回事?

#################### webpack.config.js ####################

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    mode:"production",
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin('dist'),
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:'index.html'
        }),
        new webpack.ProvidePlugin({
            _chunk:['lodash-es','chunk']
        })
    ]
}
#################### index.js ####################

console.log(_chunk(['a', 'b', 'c', 'd', 'e'], 2))
  • 这里看打包后的 main 文件,明显是将整个 lodash 打包了,WTF?

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

屌丝范 2022-09-18 17:43:40

所以最后是怎么解决的,我来自问自答一遍,
因为tree shaking 利用的是 es 的模块系统。而 lodash.js 没有使用 CommonJS 或者 ES6 的写法。所以,安装库对应的模块系统即可。
单独打包所引用的函数需要安装的模块是lodash-es,

npm i lodash-es --save

然后打包就是了,但是不能用到new webpack. ProvidePlugin({_:'loadash'})配置全局引入,否则失效,官网的行不通。唉?

纠正一下,new webpack. ProvidePlugin({_:'loadash'}),是提供全局变量引用,不用到处import。

另外附上https://github.com/Formidable...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文