vue cli+webapck4에 필요한 단계는 무엇입니까?

이번에는 vue cli+webapck4에 필요한 단계와 vue cli+webapck4의 주의사항을 알려드리겠습니다. 다음은 실제 사례입니다.

webpack4가 출시된지 꽤 됐는데, 플러그인 시스템이 안정화됐네요. webpack3의 패키징 속도가 만족스럽지 않아서, 현재 진행중인 프로젝트를 업그레이드 하기로 결정하고, 그냥 webpack4를 연습해보고 싶습니다. .

새로운 기능

0 구성

택배가 나온 후에야 webpack 팀은 구성이 실제로 약간 복잡하고 시작하기 쉽지 않다는 것을 깨달았습니다. 따라서 webapck4는 제로 구성 시작을 지원하기 시작합니다. 그러나 webpack4의 0 구성은 기본 항목과 출력만 지원합니다. 즉, 기본 항목은 ./src이고 기본 출력은 /dist입니다.

모드 선택 모드

모드에는 제작과 개발의 두 가지 옵션이 있습니다. 필수 옵션으로 모드를 기본값으로 설정할 수 없습니다. 프로덕션 모드에서는 코드 압축, 범위 승격 등 일부 필요한 최적화가 기본적으로 이루어지며, process.env.NODE_ENV는 기본적으로 프로덕션으로 지정됩니다. 개발 모드에서는 증분 빌드가 최적화되고 주석 및 프롬프트가 지원되며 평가 중인 소스 맵이 지원되는 반면 process.env.NODE_ENV는 기본적으로 개발로 지정됩니다.

sideEffects

이 구성을 사용하면 포장 부피를 크게 줄일 수 있습니다. 모듈의 package.json이 sideEffects:false로 구성되면 모듈에 부작용이 없음을 나타냅니다. 이는 webpack이 다시 내보내기에 사용된 코드를 안전하게 정리할 수 있음을 의미합니다.

모듈 유형

webpack4는 5가지 모듈 유형을 제공합니다.

1. json: require 및 import를 통해 가져올 수 있는 JSON 형식 데이터(기본값은 .json 파일)

2. webassembly: WebAssembly 모듈(현재 .wasm 파일의 기본 유형)

3. javascript/ auto : (webpack 3의 기본 유형)은 CommonJS, AMD 등 모든 JS 모듈 시스템을 지원합니다.

4. javascript/esm: EcmaScript 모듈(기본 .mjs 파일).

5. javascript/dynamic: CommonJS 및 AMD만 지원합니다.

JSON

webpack 4는 JSON의 기본 처리를 지원할 뿐만 아니라 JSON의 Tree Shaking도 지원합니다. ESM 구문을 사용하여 json을 가져올 때 webpack은 JSON 모듈에서 사용되지 않는 내보내기를 제거합니다. 또한 로더를 사용하여 json을 js로 변환하려면 ​​type을 javascript/auto로 설정해야 합니다.

optimization

Webpack 4는 CommonsChunkPlugin을 제거하고 기본적으로 많은 기능을 활성화했습니다. 따라서 webpack4는 좋은 기본 최적화를 달성할 수 있습니다. 그러나 사용자 정의 캐싱 전략이 필요한 경우 Optimization.splitChunks 및 Optimization.runtimeChunk가 추가되었습니다. 구체적인 설명은 이 글을 참고하시면 자세하게 설명되어 있습니다. RIP CommonsChunkPlugin 미리 보려면 클릭하세요
.

단계별 업그레이드

원래 vue cli 프로젝트를 업그레이드했습니다. 일반적으로 업그레이드는 두 단계로 나누어 진행됩니다. 먼저 관련 종속 플러그인을 업그레이드한 다음 webapck를 최적화합니다. 구성.문서.

플러그인 업그레이드

먼저 아래 나열된 플러그인을 해당 버전 또는 최신 버전으로 업그레이드하세요

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack -plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader @1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack- dev-middleware@3.1 .0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

다른 패키지에서 오류가 발생하는 경우 최신 패키지로 업그레이드하여 해결해야 합니다. .

구성 파일 업데이트

webpack.dev.conf.js

개발 환경은 크게 변하지 않았습니다. 결국 webpack4 최적화의 대부분은 프로덕션 환경을 위한 것입니다. 더 이상 필요하지 않은 일부 플러그인을 삭제하려면 둘 다 괜찮습니다. 예: webpack.NamedModulesPlugin, webpack.NoEmitOnErrorsPlugin, 해당 기능은 webpack4가 기본적으로 구성되어 있습니다. 동시에

mode: 'development'
webpack.production.conf.js

를 설정합니다.

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用mint-ui在手机端做出三级联动

怎样发布vue+todo-list应用

위 내용은 vue cli+webapck4에 필요한 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!