Webpack-dev-server combined with hot-replacement configuration of backend server

Webpack is a module loader. The so-called module here is actually the resources such as javascript, coffeescript, css, less, jsx, and pictures used in the project. Webpack uses different loaders to load and package these resources, and then output the packaged files. The packaged files can be one or more js files, or they can be packaged separately as needed, such as outputting all css files separately. The following figure can more intuitively illustrate what webpack does.

Author: Bing573
Link: https://www.jianshu.com/p/8adf4c2bfa51
Source: Jianshu The
copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.

For more information, please refer to the official website of webpack

Webpack has a very useful feature called Hot-replace, especially when combined with the React Hot Loader plugin, there is no need to refresh the browser during development, and any front-end code changes will be reflected in the browser in real time.

First you need to install Webpack-dev-server, a lightweight node.js express server.

npm install webpack-dev-server --save-dev

Webpack-dev-server is very small. It is used to serve resource files and cannot replace the back-end server. Therefore, if you want to develop back-end, you must use a dual-server model: a back-end server and a resource server ( i.e. Webpack-dev-server)

To configure the dual-server hot-replacement mode, you first need to modify the entry of Wepack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:9090', //Resource server address
    'webpack/hot/only-dev-server',
    './static/js/entry.coffee '
]

Note that entry: {
app: ['webpack/hot/dev-server', './app/main.js']
} is not used due to the combination of backend servers
.

Next, modify the output entry and set publicPath to the absolute path of the resource directory under the webpack-dev-server server

output: {
    publicPath: "http://127.0.0.1:9090/static/dist/",
    path: './static/dist/',
    filename: "bundle.js"
}

Added in Plugins

new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.HotModuleReplacementPlugin()

webpack variables need to be declared at the beginning of Webpack.config.js

var webpack = require('webpack');

Then insert the packaged resource file into the page file. Note that the absolute path of the resource server must be used here.

<script src="http://127.0.0.1:9090/static/dist/bundle.js"></script>

The principle of dual servers is actually to let the pages served by the backend server load the resources served by the resource service.

If you want to achieve hot loading of react, you also need the React Hot Loader plugin ,

npm install react-hot-loader --save-dev

Then put the react-hot loader at the first place in the loader chain of the jsx file

{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }

The last step is to start the Webpack-dev-server server. Note that the inline mode is used here. If the hot mode is used, an error will occur. --content-base is the resource folder. In addition, if you want to use another computer for debugging, you need to add the --host parameter to the IP address of the development server, because by default it can only be done through localhost. If the IP address changes frequently, you can write a script to start the server every time

#!/bin/sh

ip=`awk '/inet / && $2 != "127.0.0.1"{print $2}' <(ifconfig)`

node webpack-dev-server.js --port 9090 --inline --host $ip --content-base static/dist/

Webpack-dev-server combined with hot-replacement configuration of backend server

Guess you like