Question

我正在尝试运行webpack --watch，它启动了，但是它没有编译任何东西，似乎卡住了。当我运行webpack --watch -p时，它可以按预期运行，但是速度很慢，我必须等待每次编译至少20秒。

我尝试使用--verbose / --info-verbosity详细信息标志获取更多信息，但是我没有得到任何其他信息。它似乎停留在早期编译中。我试图使生产和开发模式尽可能地接近。

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(),
],
}];

我希望--watch在没有-p标志的情况下也能正常工作。它没有显示任何错误，并且“卡在”以下位置：

$ node_modules/.bin/webpack --watch             

webpack is watching the files…

Answer 1

问题似乎是深度嵌套的HTML，它没有使Webpack陷入困境，但是编译模板花费了大量的时间。罪魁祸首是使用Prettier的VueLoader

问题在这里描述：

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

解决方案是添加：

prettify: false

到

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

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

1 个答案: