问答详情
源自:2-3 webpack-dev-server的配置和使用

修改了app.vue的text;页面不会自动更新

修改了app.vue的text;页面不会自动更新。完全按照代码来写的。

提问者:qq_慕粉9025809 2018-12-20 11:28

个回答

  • 慕斯9154086
    2019-06-19 15:50:51

    你们解决了吗?

    我也是这样的

  • NG一百次
    2018-12-23 18:03:30

    我也是这样,你解决了吗?

  • qq_慕粉9025809
    2018-12-20 13:28:46

    const path = require('path')

    const HTMLPlugin = require('html-webpack-plugin') 

    const webpack = require('webpack')

    const isDev = process.env.NODE_ENV === 'development'

    const config = module.exports = {

        target: 'web', //适用于web开发

        entry: path.join(__dirname, 'src/index.js'), 

        output: {

            filename: 'bundle.js',

            path: path.join(__dirname, 'dist')

        },

        module: {

            rules: [{

                test: /\.vue$/,

                loader: 'vue-loader'

            }, {

                test: /\.css$/,

                use: [

                    'style-loader',

                    'css-loader'

                ]

            }, {

                test: /\.styl$/,

                use: [

                    'style-loader',

                    'css-loader',

                    'stylus-loader'

                ]

            }, {

                test: /\.(gif|jpg|jpeg|png|svg)$/,

                use: [{

                    loader: 'url-loader',

                    options: {

                        limit: 1024,

                        name: '[name].[ext]'

                    }

                }]

            }]

        },

        plugins: [

            new webpack.DefinePlugin({

                'process.env': { 

                    NODE_ENV: isDev ? '"development"' : '"production"'

                }

            }),

            new HTMLPlugin()

        ]

    }


    if (isDev) {

        config.devtool = '#cheap-module-eval-source-map'

        config.devServer = {

            port: 8090,

            host: '0.0.0.0', 

            overlay: {

                errors: true 

            },

            inline: true,

            hot: true, 

            //historyFallback: {},

            open: true 

        }

        config.plugins.push(

            new webpack.HotModuleReplacementPlugin(),

            new webpack.NoEmitOnErrorsPlugin()

        )

    }

    module.exports = config

     

    每次保存好之后,页面出现以下代码页面要手动刷新才会更改:

    [WDS] App updated. Recompiling...

    [WDS] App hot update...