Detailed explanation of webpack backend rendering-JS Tutorial-php.cn

Detailed explanation of webpack backend rendering

小云云

Release： 2018-01-20 13:57:51

Original

1868 people have browsed it

This article mainly introduces the detailed explanation of back-end rendering after webpack configuration. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Webpack configuration back-end rendering In 2017, vue, react, and angular have occupied the mainstream of the front-end. I have to admit that this is also the future development direction of the front-end. However, the development method of back-end rendering is still very common. Whether it is a personal project or a commercial project, back-end rendering is really rough and fast. But with the development of front-end, back-end rendering also has a lot of room for improvement. Here I will introduce my own practical experience: Front-end and back-end are not separated Realize hot loading and front-end-led development to a certain extent. Here we take koa as an example, but there is also a django version in the warehouse. In theory, it can be implemented in all languages. If you are interested, you can take a look, the warehouse address is at the end of the article.

Rendering

Principle

The principle is very simple:

1. Independently start the static resource server to package and generate the resource list (manifest)

Generate the manifest.json file through the webpack-manifest-plugin plug-in

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: &#39;http://localhost:5000/static/&#39;
})

Copy after login

The file result is as shown:

The server reads the resource list and loads it into the template file

app.use(async (ctx, next) => {
 const manifest = await fs.readFile(path.resolve(__dirname, &#39;assets/bundles/manifest.json&#39;))
 ctx.state = {
  static: JSON.parse(manifest.toString())
 }
 await next()
})

Copy after login

This middleware mounts the resource list into ctx.state (template variable) by reading manifest.json, and then you can directly reference the static resource variable in the template

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>{{ title }}</title>
 <link rel="stylesheet" href="{{static[&#39;test.css&#39;]}}" rel="external nofollow" >
</head>
<body>
 <h1>Hello, World</h1>
 
 <script src="{{static[&#39;test.js&#39;]}}"></script>
</body>
</html>

Copy after login

It should be noted that since back-end rendering generally uses multiple entries, you only need to introduce the required entry files into the corresponding template.

Hot loading

In fact, there are many solutions for hot loading: browsersync, live reload, etc., but these are full reloads and only reduce the frequency of f5. Webpack's hot loading is much more convenient through websocket (I don't know the details), configuration It’s very simple to get up.

Add

hot: &#39;webpack/hot/only-dev-server&#39;,
devServerClient: &#39;webpack-dev-server/client?http://0.0.0.0:5000&#39;

/**
完整版
entry: {
  index: &#39;./assets/index.js&#39;,
  test: &#39;./assets/test.js&#39;,
  hot: &#39;webpack/hot/only-dev-server&#39;,
  devServerClient: &#39;webpack-dev-server/client?http://0.0.0.0:5000&#39;
},
*/

Copy after login

to the entry file. Add to the plug-in: new webpack.HotModuleReplacementPlugin()

There are two points to note:

extract-text-webpack-plugin cannot be hot reloaded after adding it. Do not add this plug-in during development configuration
According to the webpack documentation, each entry file needs to add the following piece of code to achieve hot reload of js

if (module.hot) {
 module.hot.accept()
}

Copy after login

The complete configuration and code will not be posted here. The warehouse address (part of the django code is in the master branch): https://github.com/xiadd/wepack-mutipage

Related recommendations:

React front-end and back-end isomorphism prevents repeated rendering

Nuxt’s Vue.js server-side rendering practice

vue.js rendering and loop knowledge explanation

The above is the detailed content of Detailed explanation of webpack backend rendering. For more information, please follow other related articles on the PHP Chinese website!