웹 팩 설정 후 엔 드 렌 더 링 상세 설명
효과 도
의 원리
원 리 는 말하자면 매우 간단 하 다.
1.정적 자원 서버 패키지 생 성 자원 목록 을 독립 적 으로 시작 합 니 다(manifest)
웹 팩-manifest-plugin 플러그 인 을 통 해 manifest.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()
})
<!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>열 로드
열 로드 는 사실 많은 해결 방안 이 있 습 니 다.browser sync,live reload 등 입 니 다.그러나 이것들 은 모두 full reload 입 니 다.f5 의 빈 도 를 줄 였 을 뿐 웹 팩 의 열 로드 는 매우 편리 합 니 다.웹 소켓(구체 적 으로 저도 잘 모 르 겠 습 니 다)을 통 해 설정 하 는 것 도 간단 합 니 다.
입구 파일 에 더하기
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()주의해 야 할 것 은 두 가지 가 있다.
if (module.hot) {
module.hot.accept()
}이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
