webpack frames

배지

• && 형식을 확인하세요
• webpack1-ie8
• webpack3-반응
• webpack3-vue
• webpack4-반응
• webpack4-vue

업데이트 지침

1. webpack4-vue 와 webpack3-vue 에 포함된 폴더는 정확히 동일합니다. 필요한 경우 직접 복사하세요.
2. webpack4-react 와 webpack3-react 에 포함된 폴더는 완전히 동일합니다. 필요한 경우 직접 복사하세요.
3. webpack 2와 3의 차이는 매우 작습니다. 기본적으로 2를 3으로 직접 바꾸는 것은 문제가 되지 않습니다. 여기서는 공식 마이그레이션 문서인 1/3/4 버전만 논의합니다.
4. 개발환경이 핫리로드 되었습니다. ie11 이하와 호환되는 개발환경을 원하시면 핫리로드를 해제해주세요.
   • plugins 파일 .babelrc 에서 react-hot-loader/babel 제거하세요.
   • package.json 의 devDependencies 에서 react-hot-loader 제거하세요.
   • config/opt.dev.js 의 devServer.inline false여야 합니다(vue에서는 이 지점만 수정하면 됩니다).
   • 코드에서 react-hot-loader 제거
5. 개발 환경은 이미 src/mock 아래의 파일을 자동으로 읽고 핫 업데이트를 수행하는 프런트 mock api 지원합니다. 코드 로직은 example 포함된 config/mock.js 에 있습니다.
6. vue 및 vue-template-compiler 버전은 완전히 일관되어야 합니다. 그렇지 않으면 예상치 못한 오류가 발생합니다.
7. config 디렉터리의 webapck134,react,vue 구성이 통합되었습니다. 다양한 프로젝트에서는 opt.self.js 만 변경하면 됩니다.
8. readme 설명에 누락된 내용이 있습니다. 코드 주석을 읽으려면 해당 파일로 이동하십시오. 중요한 점은 config 디렉터리에 있는 파일에 주석과 공식 참조 문서 주소가 있다는 것입니다.
9. devDependencies 잠긴 버전의 종속성을 배치하는 데 사용됩니다. dependencies npm에 게시할 필요가 없으므로 이 분류는 더 임의적이고 심지어 잘못되었습니다. 자세한 내용은 Baidu 문서를 참조하세요.
10. DllPlugin 과 CommonsChunkPlugin或splitChunks 중복된 기능을 가지고 있기 때문에 전자는 미리 webpack 명령을 실행해야 하기 때문에 간단히 externals 로 대체할 수 있습니다. 후자는 작동 가능한 공간이 크고 자유롭게 압축을 풀어서 파일 크기를 보다 균일하게 만들 수 있습니다. , 다음은 DllPlugin 이 더 이상 사용되지 않습니다.

환경 준비

1. Taobao 미러 npm config set registry https://registry.npm.taobao.org
2. npm i -g npminstall 관리자로 실행하세요.
3. 명령줄을 사용하여 현재 디렉터리를 입력하고 npminstall -c 실행합니다.
4. 오류가 발생하는 경우 일반적인 해결 방법은 다음과 같습니다.
   • npm cache clean -f 및 npm cache verify -f 관리자로 실행합니다.
   • node_modules 디렉터리 삭제
   • npminstall -c 다시 실행
   • 마지막으로 더 나은 네트워크로 변경하고 node 와 npm 업그레이드하세요.
5. 사용 시 참고사항:
   • npminstall -c 와 npm install 호환되지 않습니다. 전자는 후자보다 훨씬 빠르지만 함께 사용할 수는 없습니다.
   • 사용으로 전환하려면 node_modules 폴더를 삭제해야 합니다.
   • node-v12.0.0 에 문제가 있는 경우 아직 업그레이드하지 마세요. 최신 버전의 node-v12 에는 문제가 없습니다.
   • 가끔 설명할 수 없는 패키징 오류나 코딩 오류가 발생하는 경우가 있습니다. node_modules 삭제하고 다시 시도하세요.

개발 환경 시작

1. npm start
   • 지원이 필요할 때 사용해주세요.
   • npm run env -- FOR_IE=1 npm start
2. 브라우저에서 http://localhost:8888을 엽니다.

프로덕션 환경 배포

1. npm run app
   • 지원이 필요할 때 사용해주세요.
   • npm run env -- FOR_IE=1 npm run app
2. dist 폴더의 내용을 서버에 복사하기만 하면 됩니다.

다른 기능 추가

1. npm run report 통해 프로덕션 패키지 번들 구성 확인
   • 지원이 필요할 때 사용해주세요.
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug 중단점 디버깅 시작, 포트 7777을 추가합니다.
   • 지원이 필요할 때 사용해주세요.
   • npm run env -- FOR_IE=1 npm run debug

package.json 업데이트

• npm i -g npm-check-updates 설치
• package.json 디렉터리에서 ncu (보기) ncu -u (업데이트)를 실행합니다.

반응 핫 로더 핫 리로딩 사용

공식 문서

1. package.json 의 devDependencies 에 react-hot-loader 추가하세요.
2. webpack.cfg.dev.js 의 devServer.inline true 여야 합니다.
3. .babelrc plugins 에 react-hot-loader/babel 추가
4. 시작 명령에 --hot 추가하고 동시에 HotModuleReplacementPlugin 사용하지 마십시오.
5. export 루트 구성 요소가 수정되고 반응 전에 react-hot-loader 도입되었습니다 react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

참고: 4.3.12에서만 ie8+react@0 지원하며 약간의 변경이 필요하며 이는 스크립트에서 완료되었습니다.

이미지 처리

• 일반 사진 => https://tinypng.com图片压缩=> url-loader (4kb 이하)
• svg 이미지 => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4는 ie8 연구를 지원합니다

1. DllPlugin으로 패키징한 코드는 변환되지 않았고 비호환 문제가 있을 가능성이 높기 때문에 패키징 속도를 크게 향상시킬 수는 없습니다.
2. 핫 리로드의 원칙은 Object.defineProperty인데, 이는 ie8에서 지원되지 않습니다.
3. 최신 반응/antd를 사용할 수 없습니다. 반응@0.x/[email protected]는 ie8만 지원합니다. vue는 ie8을 직접 지원하지 않습니다.
4. 현 시점에서는 webpack 3 4의 장점이 거의 모두 지원되지 않으며, Webpack 3 4는 당분간 고려되지 않고 있으며, 온라인 버전의 호환성도 그다지 좋지 않습니다.
5. ie8과 호환되도록 webpack 3 4를 정말로 사용하고 싶다면 다음이 참고용으로 제공되지만 테스트되지 않았습니다(모두 문제가 있을 것입니다)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

코드 사양 참조

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• 일반적으로 사용되는 esling 구성 eslint-config-egg eslint-config-react-app eslint-config-ali

개인별 코딩 습관 (사람마다 다르므로 본인이 옳다고 생각하는 것을 선택하세요. 참고용으로만 사용하세요)

파일 끝에 빈 줄을 남기는 방법

• 개인은 자신의 습관을 따르고 팀 개발은 자동 eslint --fix

코드 들여쓰기 정보

• 개인은 자신의 습관을 따르고 팀 개발은 자동 eslint --fix
• 탭과 공백 사이에는 끝없는 논쟁이 있습니다. html의 attr 줄 바꿈 정렬과 CSS의 콜론 정렬을 추구하지 않는다면 탭에는 아무런 문제가 없습니다. 정렬을 추구하려면 공백을 사용하는 것이 좋습니다.

따옴표에 대하여

• js는 큰따옴표를 통합합니다. 문자열 내의 큰따옴표는 " , 작은따옴표 x27 , 큰따옴표 x22 로 통합되어 큰따옴표가 통합됩니다.
• CSS는 큰따옴표를 통합하고 문자가 왜곡되는 것을 방지하려면 콘텐츠 콘텐츠를 이스케이프해야 합니다.
• css/less/scss에서는 많은 경우 작은따옴표 대신 큰따옴표를 사용할 수 있으며, 경우에 따라 작은따옴표가 컴파일 시 문제를 일으킬 수 있습니다. 또한 html 태그도 큰따옴표를 사용하므로 이것이 통합됩니다.

쉼표 추가 여부

• 구문 오류가 없으면 이를 추가하면 diff 변경 사항이 줄어듭니다.

세미콜론 추가 여부

• 구문 오류가 없으면 이를 추가하면 diff 변경 사항이 줄어듭니다.

변수 정의 정보

• 변수를 한 줄에 하나씩 따로 정의한다면 const를 우선으로 하고 var 대신 let을 사용한다.
• 가능하다면 할당을 위해 객체나 배열의 구조 분해를 사용하세요.

수입주문에 대해

• 가장 우선순위는 폴리필을 도입하는 것이고 그 다음은 React/Vue입니다.
• 둘째, 모듈 디렉터리(node_modules)에서는 모듈 경로 깊이를 먼저 정렬하고, (컴포넌트>함수>상수)에 따라 순서를 분류하여 정렬한다.
• 그런 다음 다음과 같은 로더 매체를 통해 로드됩니다. promise-loader
• 그런 다음 (컴포넌트>함수>상수)에 따라 분류 및 정렬된 개발 디렉터리(dev_dir)가 있습니다.
• 스타일 파일을 도입하고 (node_modules>dev_dir)에 따라 분류 및 정렬합니다.
• 이미지 파일을 가져와서 (node_modules>dev_dir)에 따라 분류하고 정렬합니다.