在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack import { } 多入口按需加載問題

webpack import { } 多入口按需加載問題

項(xiàng)目是多入口的應(yīng)用,在test.js和test1.js里分別引用了activity.js里的一個(gè)和兩個(gè)方法。但是最后生成的兩個(gè)js里發(fā)現(xiàn)兩個(gè)方法都引用了

單入口是沒有問題的

相關(guān)代碼

activity.js


/**
 * 活動首頁列表
 */
export function mainList () {
  const url = `/activity/activity/list.do`
  console.log(url)
}

/**
 * 取消報(bào)名
 * @param memberActId 報(bào)名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()

現(xiàn)在打包出來的結(jié)果是mainList和cancelApply都分別打包到了兩個(gè)js里。期待的結(jié)果應(yīng)該是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
回答
編輯回答
糖豆豆

webpack的tree shaking啟用是有條件的,詳細(xì)可看官網(wǎng),這里摘抄一段:

  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...

2017年12月8日 20:54
編輯回答
半心人

改成require可實(shí)現(xiàn)按需加載。
let mainList = require('@/api/activity').mainList;
//你的代碼

2017年11月30日 18:59