我有一个案例,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'
},
];