`npm run watch`不是在开发模式下编译，而是在生产中编译（-p标志）

Question

I'm trying to run webpack --watch and it starts but it doesn't compile anything, it seems it stuck. The moment I run webpack --watch -p it works as intended but it's slow and I have to wait for every compilation at least 20 seconds.

I tried getting more information using the --verbose / --info-verbosity verbose flags but I don't get ANY extra information. It seems to be stuck in early compilation. I tried to get production and dev mode as close as I could together.

var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = [{
name: 'viewenvision',
entry:[
    './src/main.js'
],
output: {
    path: path.resolve(__dirname, './public/js/viewenvision/'),
    publicPath: '/public/js/viewenvision/',
    filename: 'build.raw.js'
},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        },
    ]
},
externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
},
devServer: {
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
watchOptions: {
    poll: 100
},
devtool: '#inline-source-map',
plugins: [
    new VueLoaderPlugin(),
],
}];

I expect --watch to work without the -p flag. It shows no error and is 'stuck' on:

$ node_modules/.bin/webpack --watch             

webpack is watching the files…

Answer 1

The problem appeared to be deeply nested HTML, which didn't get Webpack stuck but it took an insane amount of time to compile the templates. The culprit in this case was was VueLoader using Prettier

The problem is described here:

https://github.com/prettier/prettier/issues/4672

And the solution is to add:

prettify: false

to

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        prettify: false,
    }
},