webpack import { } 多入口按需加载问题

Question

项目是多入口的应用，在test.js和test1.js里分别引用了activity.js里的一个和两个方法。但是最后生成的两个js里发现两个方法都引用了

单入口是没有问题的

相关代码

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()

现在打包出来的结果是mainList和cancelApply都分别打包到了两个js里。期待的结果应该是test.js里只有mainList。test1.js里有mainList和cancelApply

附上我的webpack配置文件

'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

Answer 1

改成require可实现按需加载。
let mainList = require('@/api/activity').mainList;
//你的代码

Answer 2

webpack的tree shaking启用是有条件的，详细可看官网，这里摘抄一段：

1. Use ES2015 module syntax (i.e. 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.

地址： https://webpack.js.org/guides...

Answer 3

从webpack.config.js导出数组格式的配置对象；
数组的每个元素是一个入口的配置对象；

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

改为

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

Answer 4

楼主解决了这个问题吗？同问