just add one line code, beautify your error information in project on browser
Based on webpack-hot-middleware and webpack-dev-middleware friendly log errors on your browser.
npm i webpack-browser-log --save-dev;
First, add webpack-hot-middleware/client
into the entry array.Such as
entry: {
index: ['webpack-hot-middleware/client?reload=true','./src/index.js'],
vendor: ['vue', 'vue-router', 'vuex'],
},
Next, add the following plugins to the plugins array:
plugins : [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
//...
]
Now, edit your dev-client.js
// build/dev-client.js
const WebpackBrowserLog = require('webpack-browser-log'); // use webpack-browser-log
const merge = require('webpack-merge'); // use webpack-merge
const webpackDev = require('./webpack.dev'); // webpack dev config
const base = require('./webpack.base'); // webpack base config
const webpackConfig = merge(base, webpackDev); // merge base and dev
new WebpackBrowserLog(webpackConfig); // magic
$ node build/dev-client.js
Open your browser on http://localhost:3000. Let's coding
Because of based on webpack-dev-middleware and webpack-hot-middleware. You can read their doc directly.Enjoy yourself
new webpackBrowserLog(webpackConfig, {
port : 3000, // default
errorsPluginOptions: { // default
// https://www.npmjs.com/package/friendly-errors-webpack-plugin#options
},
devMiddleware : { // default
publicPath: webpackConfig.output.publicPath,
quiet: true
},
hotMiddleware : { // default
log: () => {}
},
waitUntilValid : function () { }, // default
setup(app, express) {
// here you can get app express
// example
app.use('/static', express.static('./static'));
},
});
1.Fork it!
2.Create your feature branch: git checkout -b my-new-feature
3.Commit your changes: git commit -am 'Add some feature'
4.Push to the branch: git push origin my-new-feature
5.Submit a pull request :D
webpack-hot-middleware``webpack-dev-middleware
console
npm i webpack-browser-log --save-dev;
, entrywebpack-hot-middleware/client?reload=true
entry: {
index: ['webpack-hot-middleware/client?reload=true','./src/index.js'],
vendor: ['vue', 'vue-router', 'vuex'],
},
, plugin2
plugins : [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
//...
]
dev-client.js
// build/dev-client.js
const WebpackBrowserLog = require('webpack-browser-log'); // webpack-browser-log
const merge = require('webpack-merge'); // webpack-merge
const webpackDev = require('./webpack.dev'); // webpack.dev
const base = require('./webpack.base'); // webpack base
const webpackConfig = merge(base,webpackDev); //
new WebpackBrowserLog(webpackConfig); // webpackOK
$ node build/dev-client.js
gif
webpack-dev-middleware webpack-hot-middleware.
new webpackBrowserLog(webpackConfig, {
port : 3000, // 3000
errorsPluginOptions: { // default
// https://www.npmjs.com/package/friendly-errors-webpack-plugin#options
},
devMiddleware : { // publicPathquiet
publicPath: webpackConfig.output.publicPath,
quiet: true
},
hotMiddleware : { // log
log: () => {}
},
waitUntilValid : function () { }, //
// 4
// new WebpackBrowserLog(webpackConfig);
setup(app, express) {
//
app.use('/static', express.static('./static'));
},
});