웹 팩 학습 노트 의 최적화 캐 시,통합,게 으 른 로드
/* ： dev-tools,dev-server jshint 。 */
var webpack = require('webpack');
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// plugins
//var WebpackMd5Hash = require('webpack-md5-hash');
// “webpack-md5-hash” ： hash ， hash hash ， hash 。
var WebpackSplitHash = require('webpack-split-hash');
var config = {
entry:{
app:path.resolve(__dirname, 'src/js/entry.js'),
mobile: path.resolve(__dirname, 'src/js/mobile.js'),
// vendors.js
vendors:['react','react-dom']
},
resolve:{
alias: {
'react.js': pathToReact, //alias: ,
'react-dom.js': pathToReactDOM
},
fallback: path.join(__dirname, "node_modules")
},
resolveLoader: {
fallback: path.join(__dirname, "node_modules")
},
output:{
path:path.resolve(__dirname, 'dist'),
publicPath:'../',// html publicPath
// MD5 Hash script
filename: 'js/[name].[chunkhash:8].js',
// ， chunkFilename
chunkFilename: 'js/[name].[chunkhash:8].js'
},
module:{
loaders:[{
test: /\.jsx?$/,
// (node_modules )
exclude:path.resolve(__dirname, 'node_modules'),
loader: 'babel',
query:{
presets:['es2015', 'react']
}
},
{
test:/\.css$/,
//loader:'style!css'
loader: ExtractTextPlugin.extract("style", "css")
},
{
test:/\.scss$/,
loader:'style!css!sass'
},
//url-loader: 、 ， file-loader , base64 。 size（ limit) 25KB css BASE64 。
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'url?limit=25000&name=[name].[ext]'
}]
},
plugins:[
// ， ， vendors.js。 HTML
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'js/vendors.js'
}),
// banner
new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
// js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
/* ： style css .contenthash hash ， style hash */
new ExtractTextPlugin("css/[name].[contenthash:8].css"),// ( path)
/* ： html， webpack ， HTML ， 。*/
new HtmlWebpackPlugin({
filename:'view/index.html', // html ， path
template:'src/view/index.html', //html
inject:true, // ，true/'head'/'body'/false,
chunks:['vendors','app'],// ，
hash:false, // hash
minify:{ // HTML
removeComments:false, // HTML
collapseWhitespace:false //
}
}),
new HtmlWebpackPlugin({
filename:'view/mobile.html', // html ， path
template:'src/view/mobile.html', //html
inject:true, // ，true/'head'/'body'/false,
chunks:['vendors','mobile'],// ，
hash:false, // hash
minify:{ // HTML
removeComments:false, // HTML
collapseWhitespace:false //
}
}),
/* ： hash css js ， css js hash .
* ：webpack-md5-hash chunk-hash chunkhash， （ ）。 ， ： hash 。
*/
//new WebpackMd5Hash()
new WebpackSplitHash()
]
}
module.exports = config;
예 를 들 어 ReactJS 프로젝트 에서 웹 팩 이 React JS 와 그 모든 의존 도 를 옮 겨 다 니 지 않도록 웹 팩.config.js 에서 행동 을 다시 쓸 수 있 습 니 다.
config.alias:"react"가 코드 에 도 입 될 때마다 압축 된 React JS 파일 을 사용 합 니 다.
noParse:웹 팩 이 압축 된 파일 을 분석 하 는 것 을 막 습 니 다.
여러 개의 압축 파일 을 불 러 올 때 다음 방법 은 더욱 우아 하고 간편 합 니 다.webpack.production.js:
var webpack = require("webpack");
...
var HtmlWebpackPlugin = require('html-webpack-plugin');
var deps = [
'react/dist/react.min.js',
'react-dom/dist/react-dom.min.js'
];
var config = {
...
resolve:{
alias:{},
fallback:path.join(__dirname, "node_modules")
},
...
module:{
...
noParse:[]
}
}
/* ， */
deps.forEach(function(dep){
var depPath = path.resolve(node_modules, dep);
//path.dep 。
config.resolve.alias[dep.split(path.dep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
응용 프로그램 이 다른 라 이브 러 리,특히 React JS 와 같은 대형 라 이브 러 리 에 의존 할 때 이러한 의존 도 를 분리 하 는 것 을 고려 해 야 합 니 다.그러면 사용자 가 응용 프로그램 을 업데이트 한 후에 제3자 파일 을 다시 다운로드 하지 않 아 도 됩 니 다.위 프로필 에 있 는 entry 에 제3자 패키지 vendors 가 추가 되 었 습 니 다.그 값 은 포장 할 파일 을 분리 하 는 것 입 니 다.설정 을 실행 하면 dist/js 에서 세 개의 독립 된 파일 을 생 성 합 니 다:app.js,mobile.js,vendors.js.페이지 에 한약 을 vendors.js 에 도입 하 는 것 을 주의 하 세 요.
<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>여러 페이지 가 있 을 때 페이지 사이 에 공유 코드 가 있 지만 페이지 에 모든 코드 를 불 러 오고 싶 지 않 을 때 다 중 입 구 를 정의 할 수 있 습 니 다.예 를 들 어 프로필 에 있 는 app.js 는 pc 엔 드 페이지,mobile.js 는 모 바 일 페이지,output 의 filename:'js/[name][chunkhash:8].js'에 대해 파일 이름 변 수 를 사용 하여 dist/js 에서 원본 파일 과 같은 이름 의 파일 을 생 성 할 수 있 습 니 다.
4.캐 시 및 게 으 른 로드 최적화
생산 환경 에서 출력 파일 이름 을 hash 값 에 추가 합 니 다.파일 이 변 경 될 때 클 라 이언 트 에 게 이 파일 을 다시 불 러 오 라 고 강요 하 는 것 이 목적 입 니 다.변 하지 않 은 파일 은 캐 시 파일 을 계속 사용 합 니 다.자주 사용 하 는 것 은 hash 와 chunkhash 입 니 다.설정 파일 의[chunkhash:8]은 8 비트 chunkhash 값 을 캡 처 합 니 다.
웹 팩 의 컴 파일 이념:웹 팩 은 style 을 js 의 일부분 으로 보기 때문에 chunkhash 를 계산 할 때 모든 js 코드 와 style 코드 를 혼합 하여 계산 합 니 다.예 를 들 어 entry.js 는 main.css 를 인용 했다.
import 'main.css';
alert('I am main.js');1.extract-text-webpack-plugin 을 사용 하여 출력 css 파일 을 단독으로 컴 파일 합 니 다.
extract-text-webpack-plugin 설치,
npm install extract-text-webpack-plugin --save-dev
//webpack.production.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),// ( path)다음 상황 을 고려 하여 main.css 파일 만 수정 하고 entry.js 파일 을 수정 하지 않 았 습 니 다.출력 된 js 파일 hash 를 컴 파일 하 는 것 이 바 뀌 었 습 니까?정 답 은 바 뀌 었 습 니 다.위 에서 언급 한 웹 팩 의 컴 파일 이념 으로 웹 팩 은 style 을 js 의 일부분 으로 보기 때문에 chunkhash 를 계산 할 때 모든 js 코드 와 style 코드 를 혼합 하여 계산 합 니 다.해결 방법 은 웹 팩-md5-hash 플러그 인 을 사용 하 는 것 입 니 다.
//webpack.production.config.js
var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();
3.메 인 파일 은 chunkhash 대신 hash 를 사용 하여 비동기 로드 모듈 이 바 뀌 었 을 때 메 인 파일 hash 가 바 뀌 지 않 습 니 다.
파일 에 비동기 모듈 이 도입 되면 비동기 모듈 이 수정 되면 출력 을 컴 파일 하 는 js 파일 의 chunkhash 에 영향 을 줄 수 있 습 니까?현재 입구 파일 에 비동기 모듈 a.js 를 도입 하고 a.js 파일 은 b.js,b.js 동기 화 c 모듈 을 도입 합 니 다.
//entry.js
'use strict';
import './saveCarInfo.js';
window.onload = function(){//
require.ensure(['./a.js'],function(require){
var moduleA = require('./a.js');
},'a');
};
//a.js
'use strict'
console.log("a");
setTimeout(function(){
require.ensure([],function(require){
require('./b.js');
},'b');
},10000);
module.exports = "moduleA";
//b.js
import fn_c from './c.js';
console.log('b');
module.exports = 'moduleB';
//c.js
console.log("c");
module.exports = "moduleC";
이 때 a.js 파일 의 코드 를 수정 하고 컴 파일 한 후 a.[chunkhash].js 의 chunkhash 가 바 뀌 며 생 성 된 메 인 파일 app[chunkhash].js 의 chunkhash 값 은 변 하지 않 습 니 다.이 유 는 웹 팩-md5-hash 의 이러한 계산 방식 이 비동기 모듈 의 내용 을 무시 한 것 입 니 다.이 는 문제 가 될 수 있 습 니 다.비동기 모듈 의 수정 은 메 인 파일 의 chunkhash 값 에 영향 을 주지 않 습 니 다.해결 방법 은 출력 된 주 파일 을[chunkhash]가 아 닌[hash]로 사용 하 는 것 입 니 다.
output:{
path:path.resolve(__dirname, 'dist'),
publicPath:'../',// html publicPath
filename: 'js/[name].[hash:8].js',
// ， chunkFilename
chunkFilename: 'js/[name].[chunkhash:8].js'
},보충:npm 는 웹 팩-md5-hash 대신 웹 팩-split-hash 플러그 인 을 제공 합 니 다.이 플러그 인 은 각 비동기 모듈 의 hash 값 을 가 져 온 다음 에 이 hash 값 을 메 인 파일 의 코드 내용 과 함께 hash 를 계산 하 는 매개 변수 로 사용 하면 메 인 파일 의 hash 값 이 다른 단계 모듈 의 수정 에 따라 수정 되 는 것 을 보증 할 수 있 습 니 다.하지만 검증 해 보 니 실현 되 지 않 았 다...
4.html-webpack-plugin 동적 으로 html 생 성
설정 파일 의 출력 파일 은 버 전 번호 로[chunkhash]를 가 져 왔 습 니 다.style 이나 js 파일 이 바 뀌 면 그 값 이 달라 집 니 다.html-webpack-plugin 을 이용 하여 웹 팩 에서 전단 자원 포장 을 완성 한 후,자동 으로 포 장 된 자원 경로 와 버 전 번 호 를 HTML 에 기록 하여 자동화 효 과 를 얻 습 니 다.
//webpack.production.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
...
new HtmlWebpackPlugin({
filename:'view/index.html', // html ， path
template:'src/view/index.html', //html
inject:true, // ，true/'head'/'body'/false,
chunks:['vendors','app'],// ，
hash:false, // hash
minify:{ // HTML
removeComments:false, // HTML
collapseWhitespace:false //
}
}),
new HtmlWebpackPlugin({
filename:'view/mobile.html', // html ， path
template:'src/view/mobile.html', //html
inject:true, // ，true/'head'/'body'/false,
chunks:['vendors','mobile'],// ，
hash:false, // hash
minify:{ // HTML
removeComments:false, // HTML
collapseWhitespace:false //
}
})
]}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
