Javascript 未在浏览器中执行Webpack 4拆分块

Javascript 未在浏览器中执行Webpack 4拆分块,javascript,webpack,Javascript,Webpack,我有此Web包4的配置: const webpack = require('webpack'); const path = require('path') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { mode: "development", entry: { main: './js/main.js'

我有此Web包4的配置:

const webpack = require('webpack');
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    mode: "development",
    entry: {
        main: './js/main.js',
        login: './js/apps/login/login_app.js',
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].[hash].js'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    name: 'vendors',
                    chunks: 'all',
                    enforce: true,
                    priority: 1,
                    test(module, chunks) {
                        const name = module.nameForCondition && module.nameForCondition();
                        return chunks.some(chunk => chunk.name === 'main' && /node_modules/.test(name));
                    }
                },
                main: {
                    name: 'main',
                    chunks: 'all',
                    enforce: true,
                    priority: 0,
                    test(module, chunks) {
                        return chunks.some(chunk => chunk.name === 'main');
                    }
                },
                login: {
                    name: 'login',
                    chunks: 'all',
                    enforce: true,
                    priority: 0,
                    test(module, chunks) {
                        return chunks.some(chunk => chunk.name === 'login');
                    }
                },
            }
        }
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        modules: ['js', 'node_modules'],
        alias: {
            "backbone": path.join(__dirname, 'node_modules', 'backbone', 'backbone'),
            "spin.jquery": 'lib/spin.jquery',
            "datetimepicker": 'lib/datetimepicker',
            "common-behavior": 'common/common_behavior',
            "utilities": 'common/utilities',
            "storage": 'models/storage',
            "local_storage": 'local_storage',
            "session_storage": 'session_storage',
            "cookie_storage": 'cookie_storage',
            "head_app": 'apps/head/head_app',
            "pages": 'pages',
            "header_app": 'apps/header/header_app',
            "footer_app": 'apps/footer/footer_app',
            "views": 'common/views',
            "search_activity_app": 'apps/search/search_activity_app',
            "calendar": 'components/calendar/calendar',
            "calendar-render": 'components/calendar/calendar.render',
            "calendar-costants": 'components/calendar/calendar.costants',
            "components-utils": 'components/utils',
            "dropdown": "components/dropdown/dropdown",
            "dropdown-render": "components/dropdown/dropdown.render",
            "dropdown-constants": "components/dropdown/dropdown.constants",
            "handlebars": 'handlebars/dist/handlebars.min.js',
            "bootstrap-datetimepicker": 'lib/bootstrap-datetimepicker.min',
            "bootstrap-select": "lib/bootstrap-select",
            "jasny-bootstrap": "jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
            "card": 'lib/jquery.card',
        }
    },
    module: {
        rules: [
            { test: /pages/, loader: 'imports-loader?head_app' },
            { test: /views/, loader: 'imports-loader?head_app' },
            { test: /footer_app/, loader: 'imports-loader?head_app' },
            { test: /header_app/, loader: 'imports-loader?head_app' },
            { test: /spin.jquery/, loader: 'imports-loader?jquery,spin' },
            { test: /bootstrap-datetimepicker/, loader: 'imports-loader?bootstrap,moment' },
            { test: /bootstrap-select/, loader: 'imports-loader?bootstrap' },
            { test: /jasny-bootstrap/, loader: 'imports-loader?jquery,bootstrap' },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
              }
        ]
    },
    plugins: [
        //new BundleAnalyzerPlugin()
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
           })
      ]
}
将生成以下文件:

main.ca06beb99f4c5bcd9ee2.js
vendors.ca06beb99f4c5bcd9ee2.js
login.ca06beb99f4c5bcd9ee2.js
但是如果我在我的页面中导入js,则不会执行任何操作,在我的项目中,我不仅有登录页面,还有其他页面,通过路由器,我希望动态加载特定的构建,例如:我访问
/home
页面,我希望加载
home.js
等等

因此,我的问题是:

  • 为什么导入主供应商和供应商时,浏览器中不会发生任何事情
  • 使用此网页代码拆分,当路由匹配时,我是否可以仅动态加载页面的构建
  • 所有页面代码都使用节点模块库,例如登录应用程序使用一些节点模块。在何处添加这些节点模块?在卖主那里?在login.js内还是在另一个供应商login.js内?什么是正确的方法以及如何实现它
  • 谢谢