Webpack js 包被加载但未执行

Question

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

我使用:node v10.3.0、yarn 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');
});

我的 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)$/));

有什么地方出了问题吗？

Answer 1

问题是我使用了优化:{ splitChunks: { chunks: "all"} } 并且没有包含 block 文件。