main.js has been loaded,but it didn't run

[misakamayako]

Bug report

What is the current behavior?
the main.js has been loaded,but it didn't run

If the current behavior is a bug, please provide the steps to reproduce.
the devDependencies package.json

"autoprefixer-loader": "^2.0.0",
    "babel": "^6.23.0",
    "babel-eslint": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.23.1",
    "eslint": "^4.19.1",
    "eslint-plugin-vue": "^4.5.0",
    "eslint-plugin-html": "^4.0.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "less-loader": "^4.1.0",
    "html-loader": "^0.3.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.5",
    "style-loader": "^0.21.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^2.3.0",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^15.2.4",
    "vue-property-decorator": "^6.1.0",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^4.12.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2"

the base.config

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        vendors: './src/vendors'
    },
    output: {
        path: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: [MiniCssExtractPlugin.loader,'postcss-loader'],
                        less: [MiniCssExtractPlugin.loader,'postcss-loader']
                    }
                }
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                }
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /iview\/.*?js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ]
            },
            {
                test: /\.less/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=1024'
            },
            {
                test: /\.(html|tpl)$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename :'[name].css',
            chunkFilename:'[id].css'
        }),
        new VueLoaderPlugin()
    ],
    node: {
        fs: 'empty'
    },
    resolve: {
        extensions: ['.js', '.vue', '.ts'],
        alias: {
            'vue': 'vue/dist/vue.esm.js'
        }
    }
};

the devConfig

const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

fs.open('./src/config/env.js', 'w', function(err, fd) {
    const buf = 'export default "development";';
    fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});

module.exports = merge(webpackBaseConfig, {
    devtool: '#source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename :'[name].css',
            chunkFilename:'[id].css'
        }),
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: './src/template/index.ejs',
            inject: false
        })
    ]
});

the main.js

alert('foo')

What is the expected behavior?

Other relevant information:
webpack version: 4.12.0
Node.js version: 8.11.1
Operating System: win32 6.1.7601
Additional tools:

[montogeek]

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

[misakamayako]

@montogeek ,thx for your suggest.After i delete everything i can, i created a git and pull to the github. It's still runing without error,and not work

[louisscruz]

I seem to be having the same problem on the latest version (4.12.1). I have runtime.js, vendor.js, and app.js, each rendered in the index.html. When I place breakpoints, runtime.js seems to evaluate as expected, but the inner contents of the app.js IIFE are never hit. This behavior only occurs in production – development is fine.

[MhMadHamster]

@misakamaiyako remove vendors from entry point and replace it in your index.html with vendor.chunk.js (since chunkFilename have [name].chunk.js template in webpack.dev.config, also add minChunks: 1 to the commons cacheGroup in webpack.dev.config, if you want to move all vendor scripts to the separate chunk, since it is used only in one chunk in your example

TL;DR; it's not webpack's fault, in your example all vendor scripts are being placed inside vendor.chunk.js and it's not being loaded on the page

[louisscruz]

I found the solution to my specific (unrelated) problem. Just wanted to post this in case it will save days/weeks of someone else's life (@ChieveiT?).

The issue was that the style.js file that Webpack now produces was not being rendered on the page by the server's templating logic. For more information about this style extraction problem:

webpack-contrib/mini-css-extract-plugin#151
webpack-contrib/mini-css-extract-plugin#113

In my specific scenario, I didn't want to inject the script on the page anyways (since it's essentially a blank file). However, it's critical that the contents of that file are evaluated on the page, else the webpackJsonp internals will get screwed up. So, I wrote a crappy plugin that takes the file's contents and prepends it to my vendor.js. This solution is very jenky, and I very much look forward to Webpack providing a solution (where the file isn't generated at all)...

[thaoms]

Any news on this one?

[Lynn-cc]

I had the same problem before and I found it's my fault: I didn't load the vendors.js which include the vue.runtime.js , so vue didn't run and no errors showed.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[vitaliy-kuzmich]

have same issue, all scripts and files are loaded, but no entrypoint function get executed.

[montogeek]

@vitaliy-kuzmich Please create a new issue with a reproducible example repository.

[vitaliy-kuzmich]

@montogeek it is ok, it is strange that webpack does not include bundle.0.js into html page, have to add it manually.