webpack-browser-log

webpack-broswer-log

Based on webpack-hot-middleware and webpack-dev-middleware friendly log errors on your browser.

Installing

npm i webpack-browser-log --save-dev;

Usage

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

Config

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

Contributing

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-middlewareconsole

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

http://localhost:3000.

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