웹팩 구성 및 백엔드 렌더링에 대한 자세한 설명-JS 튜토리얼-php.cn

웹팩 구성 및 백엔드 렌더링에 대한 자세한 설명

小云云

풀어 주다： 2018-01-02 10:38:38

원래의

1802명이 탐색했습니다.

이 글은 웹팩 구성 후의 백엔드 렌더링에 대한 자세한 설명을 주로 소개하는 글인데, 에디터가 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Webpack 구성 백엔드 렌더링 2017년에는 Vue, React, Angle이 프론트엔드의 주류를 차지했고, 이것이 앞으로의 프론트엔드 개발 방향이기도 함을 인정해야겠습니다. 백엔드 렌더링 방법은 개인 프로젝트이든 상업용 프로젝트이든 여전히 매우 일반적입니다. 백엔드 렌더링은 실제로 거칠고 빠릅니다. 그러나 프런트엔드의 개발과 함께 백엔드 렌더링도 많이 발생합니다. 개선의 여지가 있습니다. 여기서는 핫 로딩과 프런트엔드 주도 개발에 대한 저의 실제 경험을 소개하겠습니다. 여기에서는 Koa를 예로 들지만 이론적으로는 모두 django 버전이 있습니다. 관심이 있으시면 살펴보실 수 있습니다. 창고 주소는 기사 끝에 있습니다.

Rendering

원칙

원칙은 여전히 매우 간단합니다.

1. 정적 리소스 서버를 독립적으로 시작하여 리소스 목록(manifest)을 패키징하고 생성합니다.

webpack-manifest-plugin 플러그인을 통해 매니페스트.json 파일을 생성합니다.

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: 'http://localhost:5000/static/'
})

로그인 후 복사

파일 결과는 다음과 같습니다. 그림:

서버는 리소스 목록을 읽고 템플릿 파일에 로드합니다.

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

로그인 후 복사

이 미들웨어는 매니페스트.json을 읽어 리소스 목록을 ctx.state(템플릿 변수)에 마운트한 후 직접 추가할 수 있습니다. 템플릿에 참조된 정적 자산 변수

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

로그인 후 복사

백엔드 렌더링은 일반적으로 여러 항목을 사용하므로 해당 템플릿에 필요한 항목 파일만 도입하면 된다는 점에 유의해야 합니다.

핫 로딩

실제로는 핫 로딩을 위한 많은 솔루션(browsersync, live reload 등)이 있지만 이는 f5의 빈도만 줄이는 전체 리로드입니다. Webpack의 핫 로딩은 websocket을 통해 훨씬 더 편리하며(자세한 내용은 모르겠습니다)

항목 파일에서

hot: 'webpack/hot/only-dev-server',
devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'

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

로그인 후 복사

플러그인에 추가: new webpack.HotModuleReplacementPlugin()

주의해야 할 두 가지 사항이 있습니다.