About the combination of webpack.ProvidePlugin and treeshaking of webpack4?

my configuration file looks like this. The ides/shimming/-sharpshimming-%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F" rel=" nofollow noreferrer > official guide provides ["lodash-es","chunk"] as an array of parameter values, but why is the whole lodash still packaged? What I expect is to package only the lodash chunk method. What"s going on?

-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp webpack.config.js -sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp

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"]
        })
    ]
}
-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp index.js -sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp-sharp

console.log(_chunk(["a", "b", "c", "d", "e"], 2))
  • look at the packaged main file, which obviously packages the whole lodash , WTF?

clipboard.png

Jun.21,2022

so how to solve the problem in the end, I came from asking myself,
because tree shaking uses es's module system . On the other hand, lodash.js does not use CommonJS or ES6. Therefore, install the corresponding module system of the library.
the module that needs to be installed to package the referenced function separately is lodash-es,

npm i lodash-es --save

and then pack it, but you can't use new webpack. ProvidePlugin ({_: 'loadash'}) configuration is introduced globally, otherwise it will become invalid and the official website will not work. Alas?

correct it, new webpack. ProvidePlugin ({_: 'loadash'}), which provides global variable references instead of import everywhere.

attach https://github.com/Formidable...

Menu