Webpack import {} multi-entry on-demand loading problem

The

project is a multi-entry application, referring to one and two methods in activity.js in test.js and test1.js, respectively. But in the last two js, it is found that both methods refer to

.

single entry is not a problem

related codes

activity.js


/**
 * 
 */
export function mainList () {
  const url = `/activity/activity/list.do`
  console.log(url)
}

/**
 * 
 * @param memberActId id
 */
export function cancelApply (memberActId) {
  const url = `/activity/activity/cancel.do`
  console.log(url)
}

test.js

import { mainList } from "@/api/activity"
mainList()

test1.js

import { mainList, cancelApply } from "@/api/activity"
mainList()
cancelApply()

now the result is that mainList and cancelApply are packaged into two separate js. The expected result should be that there is only mainList in test.js. There are mainList and cancelApply in test1.js

attach my webpack profile

"use strict"
const path = require("path")
const utils = require("./utils")
const config = require("../config")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const resolve = (dir) => {
  return path.join(__dirname, "..", dir)
}
const webpackConfig = {
  mode: "production",
  devtool: "source-map",
  context: path.resolve(__dirname, "../"),
  entry: {test: "./src/js/test.js", test1: "./src/js/test1.js"},
  resolve: {
    extensions: [".js"],
    alias: {
      "@": resolve("src")
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          "babel-loader"
        ]
      }
    ]
  },
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash:7].js"),
    publicPath: config.build.assetsPublicPath
  },
  plugins: [
    new UglifyJsPlugin({
      sourceMap: true
    })
  ]
}
module.exports = webpackConfig

can be loaded on demand by changing it to require.
let mainList = require ('@ / api/activity'). MainList;
/ / your code


The tree shaking of

webpack is enabled with conditions. For more information, please see the official website. Here is an excerpt:

  1. Use ES2015 module syntax (import and export).
  2. Add a "sideEffects" property to your project's package.json file.
  3. Use production mode configuration option to enable various optimizations including minification and tree shaking.

address: ides/tree-shaking/" rel=" nofollow noreferrer "> https://webpack.js.org/guides.


did the landlord solve this problem? Ask


exports configuration objects in array format from webpack.config.js; each element of the
array is an entry configuration object;

module.exports = {
    entry:{
        app1:'app1.js',
        app2:'app2.js'
    }
}
Change

to

module.exports = ['app1','app2'].map(entry => ({
    entry:{
        [entry]:`${entry}.js`
    }
}))
Menu