웹팩 구성 및 백엔드 렌더링에 대한 자세한 설명
- 小云云원래의
- 2018-01-02 10:38:381798검색
이 글은 웹팩 구성 후의 백엔드 렌더링에 대한 자세한 설명을 주로 소개하는 글인데, 에디터가 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
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['test.css']}}" rel="external nofollow" >
</head>
<body>
<h1>Hello, World</h1>
<script src="{{static['test.js']}}"></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()
주의해야 할 두 가지 사항이 있습니다.
extract-text-webpack-plugin은 사용할 수 없습니다. 이 플러그인을 추가한 후 핫 리로드하지 마세요. 권장사항:
지시문 구현을 사용한 Angularjs 렌더링의 별점 시스템
Vuejs는 vue-markdown을 사용하여 주석 방법을 렌더링합니다.
지정된 DOM 노드에 구성 요소를 렌더링하는 React의 방법에 대한 자세한 설명
위 내용은 웹팩 구성 및 백엔드 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!