Webpack js捆绑包已加载但未执行

我有三个网页配置文件。一个用于生产，一个用于开发，一个用于通用配置。当我运行dev config时，js文件被加载，我可以在浏览器dev工具中看到，但是它没有被执行。如果我运行生产配置，一切正常

我使用：节点v10.3.0、纱线v1.7.0、webpack 4.19.1、webpack cli 3.1.0

webpack.common.js以下是我的输入、输出和加载程序：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        app: ['./src/javascript/entry.js', './src/scss/main.scss', './src/images/entryImages.js'],
    },
    output: {
        filename: "javascript/[name].js",
        path: path.resolve(__dirname, "./dist"),
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: [
                                require('autoprefixer')({'browsers': ['> 1%', 'last 2 versions']}),
                            ]
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]

            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env'],
                    }
                }
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                    publicPath: '/public/resources/themes/zimet/dist/',
                }
            },
        ]
    },
}

webpack.dev.js：

 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const WebpackShellPlugin = require('webpack-shell-plugin');


 module.exports = merge(common, {
     devtool: 'source-map',
     mode: 'development',
     watch: true,
     optimization: {
         splitChunks: {
             chunks: "all"
         }
     },
     plugins: [
         new LiveReloadPlugin({
             protocol: 'http',
             hostname: '127.0.0.1',
             appendScriptTag: true
         }),
         new CleanWebpackPlugin(['dist']),
         new MiniCssExtractPlugin({
             filename: 'css/[name].css',
             chunkFilename: "[id].css"
         }),
         new WebpackShellPlugin({onBuildExit:['cd ../.. &&  composer vendor-expose']})
     ]
 })

webpack.production.js：

const glob = require('glob-all');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require("purifycss-webpack");
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common.js');
const merge = require('webpack-merge')
const RemoveHeadTagPlugin = require('./removeHeadTagPlugin');
const WebpackShellPlugin = require('webpack-shell-plugin');

const templateBaseDirName = __dirname + '/templates/'

let Files = glob.sync([templateBaseDirName + "**/*.ss"]);


module.exports = merge(common, {
    mode: 'production',
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: "[id].css"
        }),
        new PurifyCSSPlugin({
            paths: (Files),
            purifyOptions: {
                minify: true,
                info: true,
                rejected: true,
                whitelist: ['*js*']
            }
        }),
        new ImageminWebpackPlugin({
            imageminOptions: {
                plugins: [
                    imageminOptipng({
                        optimizationLevel: 5
                    }),
                    imageminGifsicle({
                        interlaced: true
                    }),
                    imageminJpegtran({
                        progressive: true
                    }),
                    imageminSvgo({
                        removeViewBox: true
                    })
                ]
            }
        }),
        new HtmlWebpackPlugin({
            excludeChunks: ['app'],
            filename: 'icons.ss',
            template: './src/icons/icons.html',

        }),
        new WebappWebpackPlugin({
            logo: './src/icons/icon.svg',
            prefix: 'icons/',
            emitStats: false,
            persistentCache: true,
            inject: 'true',
            background: '#fff',
            title: 'Webpack App',
            icons: {
                android: true,
                appleIcon: true,
                appleStartup: true,
                coast: false,
                favicons: true,
                firefox: true,
                opengraph: false,
                twitter: false,
                yandex: false,
                windows: false
            }
        }),
        new RemoveHeadTagPlugin(),
        new WebpackShellPlugin({onBuildExit: ['cd ../.. &&  composer vendor-expose']}),
    ],
})

我要运行的JS代码：

document.addEventListener("DOMContentLoaded", () => {
     alert('hello world');
     console.log('now');
});

My entry.js：

// get all files from same directory that end with .js
// this will save us from requiring every js file

function requireAll(r) { r.keys().forEach(r); }

requireAll(require.context('./', false, /\.(js)$/));

---

有什么问题吗？

问题是我使用了优化：

{splitChunks:{chunks:{all}}

并且没有包括区块文件。

问题是我使用了优化：

{splitChunks:{chunks:{all}}

并且没有包括区块文件。

浏览器控制台中有错误吗？这可能不是唯一的问题，但是为什么在同一条规则中使用'style loader'和'MiniCssExtractPlugin.loader'？样式加载器用于将CSS作为标记插入索引文件的顶部。MiniCssExtractPlugin的作用正好相反，它将css提取到一个.css文件中。我不确定将它们一起使用是否有意义。浏览器控制台中是否有错误？这可能不是唯一的问题，但是为什么在同一条规则中使用'style loader'和'MiniCssExtractPlugin.loader'？样式加载器用于将CSS作为标记插入索引文件的顶部。MiniCssExtractPlugin的作用正好相反，它将css提取到一个.css文件中。我不确定将它们一起使用是否有意义。嗨，你能解释一下在哪里包含区块文件吗？我在包含js css文件的地方包含了区块文件。在我的例子中，它是主页控制器。所以如果你有一个index.html包含在那里。哇，从我的观点来看，这个原因是最意想不到的。谢谢您好，您能解释一下在哪里包含区块文件吗？我在包含js css文件的地方包含了区块文件。在我的例子中，它是主页控制器。所以如果你有一个index.html包含在那里。哇，从我的观点来看，这个原因是最意想不到的。谢谢