I wrote a command line tool based on webpack
, using webpack-dev-server
. Modifying the file does not cause page reload or module overload, as shown below:
- modifying files can cause compiled
- refresh to see the modified content
- websocket received compiled message
related information:
"webpack": "^3.11.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.11.2",
"webpack-hot-middleware": "^2.21.0",
devSever is configured as follows
devServer: {
clientLogLevel: "warning",
hot: true,
hotOnly: true,
contentBase: false,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath, // /
proxy: config.dev.proxyTable,
quiet: true,
watchOptions: {
poll: config.dev.poll, // true
}
},
plugins: [
new webpack.DefinePlugin({
"process.env": require("../config/dev.env")
}),
new webpack.HotModuleReplacementPlugin(),
// new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
// new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: "index.html",
template: dirs.template,
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: dirs.statics,
to: config.dev.assetsSubDirectory,
ignore: [".*"]
}
]),
new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${config.dev.host}:${config.dev.port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
})
]