抛出异常后webpack无法刷新

时间:2018-06-08 18:35:04

标签: npm webpack vue.js webpack-dev-server

我有一个案例,webpack-dev-server正确刷新和更新,前提是没有错误,这是预期的,但是一旦收到解析错误,即使在进行了更正后也不会刷新,这使我不得不停止并重新启动开发服务器我发生的每一个小错误,在开发时,可能经常发生。

我现在正在遇到的错误是当我弄乱vue.js的单个文件组件时。如果.vue文件中出现错误,它会中断开发服务器,直到我停止并重新启动它。

是否有办法让webpack-dev-server在抛出异常并修复错误后自动重启?

的package.json:

{
  "name": "my_webpage",
  "version": "0.0.1",
  "description": "my website",
  "main": "index.js",
  "dependencies": {
    "vue": "^2.5.13"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.9",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dashboard": "^1.1.1",
    "webpack-dev-server": "^2.11.1",
    "write-file-webpack-plugin": "^4.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "babel --presets es2015 src/js/main.js -o dist/main.bundle.js",
    "start": "http-server",
    "webpack": "webpack --config webpack.config.js",
    "dev": "webpack-dashboard -- webpack-dev-server --hot"
  },

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const cleanwebpackplugin = require('clean-webpack-plugin');
const copywebpackplugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');

const BASE_DIR = __dirname;
const SERVER_DIR = __dirname.replace('Client','Server');
const SERVER_STATIC_DIR = SERVER_DIR + "/static/";

const STATIC_DIR = path.join(BASE_DIR,'/static'); //base directory of all static files.  this is assumed to be a folder in the base directory of the project
const DIST_DIR = path.join(BASE_DIR,'/dist'); //dist folder is assumed to be located in base directory of the project




module.exports = [
    //CLIENT OUTPUT
    {
        name: "ClientConfig",
        entry: {
            main: './src/main.js', //entry point of each bundle.  each entry will create a new js bundle
        },
        output: {
            path: path.join(BASE_DIR, '/dist/js'), //all bundles will go to this folder
            filename: '[name].bundle.js', //use the key name of the entry for the filename
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new cleanwebpackplugin([
                'dist',
            ]),
            new WriteFilePlugin(),
            new copywebpackplugin([{from:STATIC_DIR,to:DIST_DIR}]),
            new DashboardPlugin({port:8020})
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['env']
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    //options: {
                    //    loaders: {

                    //    }
                    //}
                }
            ]
        },
        stats: {
            colors: true
        },
        devServer: {
            contentBase: path.join(DIST_DIR),
            port: 8080,
            host: '127.0.0.1',
            inline: true,
            hot: true,
            open:true,
            historyApiFallback: true,
            compress: true
        },
        devtool: 'source-map'
    },
    //SERVER OUTPUT
    {
        name: "ServerConfig",
        entry: {
            main: './src/main.js', //entry point of each bundle.  each entry will create a new js bundle
        },
        output: {
            path: path.join(SERVER_STATIC_DIR, '/js'), //all bundles will go to this folder
            filename: '[name].bundle.js', //use the key name of the entry for the filename
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new cleanwebpackplugin([
                    //'dist',
                    SERVER_STATIC_DIR,
                ],
                {
                    root: SERVER_DIR
                }),
            new WriteFilePlugin(),
            new copywebpackplugin([{from: STATIC_DIR, to: SERVER_STATIC_DIR}]),
            //new copywebpackplugin([{from:STATIC_DIR,to:DIST_DIR}]),
            //new DashboardPlugin()
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['env']
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    //options: {
                    //    loaders: {

                    //    }
                    //}
                }
            ]
        },
        devServer: {
            contentBase: DIST_DIR,
            port: 8080,
            host: '127.0.0.1',
            inline: true,
            hot: true,
            open:true,
            historyApiFallback: true,
            compress: true
        },
        stats: {
            colors: true
        },
        devtool: 'source-map'
    },


];

0 个答案:

没有答案