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

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:

Author: Fantashit

2 thoughts on “main.js has been loaded,but it didn’t run

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

  2. 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)…

Comments are closed.