vue-cli 구성 파일(자세한 튜토리얼)

이 글에서는 주로 vue-cli의 webpack 구성 방법을 소개합니다. 주로 vue의 config 폴더에 있는 해당 코드와 config의 파일 구조를 분석합니다. 관심 있는 친구들은 이 글을 참고하세요

최근에 webpack을 공부하고 있는데, 갑자기 vue-cli에서 webpack이 어떻게 구성되어 있는지 알고 싶어서 관련 기사를 많이 읽었고, vue-cli 구성에 대해서도 몇 가지 생각해 냈습니다. "일을 잘하려면 먼저 도구를 갈아야 한다"는 말이 있듯이! 이 기사에서는 주로 vue의 config 폴더에 있는 관련 코드를 분석합니다.

먼저 config의 파일 구조를 살펴보겠습니다.

|-config
|---dev.env.js
|---index.js
|---prod.env.js

vue 프로젝트 폴더를 열면 files 폴더 아래에 세 개의 파일이 명확하게 표시됩니다. "dev.env.js", "index.js", "prod.env.js", 먼저 prod.env.js 파일을 열고 내용을 살펴봅니다.

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

prod.env.js 내용이 매우 많습니다. 간단합니다. 실행 환경이 "프로덕션(프로덕션 환경)"임을 나타내는 개체를 내보냅니다. 다음으로 해당 "dev.env.js" 파일을 살펴보겠습니다.

'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

"dev.env.js"에서 webpack-merge 모듈이 처음 도입되었습니다. 이 모듈의 기능은 두 개의 구성 파일 객체를 병합하고 새로운 구성 파일을 생성하는 것입니다. 이는 es6의 object.ass()와 다소 유사합니다.

vue-cli는 몇 가지 공통 구성을 추출하여 하나의 파일에 저장하고 다른 코드를 구성합니다. 다른 환경에서는 webpack-merge를 사용하여 중복 코드를 병합하고 줄입니다. 문서에 따르면 "webpack은 반복하지 않음(Don't Repeat yourself - DRY) 원칙을 따르며 더 이상 다르지 않습니다. 동일하게 구성합니다.

좋아, 코드로 돌아가자. webpack-merge를 도입한 후 이 파일에는 prod.env.js도 도입된 다음 prod.env.js의 구성을 새로운 구성과 결합합니다. 개발환경(development)이 병합되었음을 나타냅니다. (왜 이러는지 잘 모르겠습니다. 병합하지 않고 module.exports를 직접 작성해도 괜찮습니다. 우아한 다운그레이드를 위한 것인가요?) ={NODE_ENV:'"development'}

또 주목해야 할 점은 개발과 생산을 큰따옴표로 묶어야 한다는 것입니다. 오류가 보고됩니다! ! !

마지막으로 index.js를 살펴보겠습니다.

'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false,
 /**
  * Source Maps
  */
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map',
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 },
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
  * Source Maps
  */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

노드의 경로 모듈이 처음에 소개되어 있습니다.

그런 다음 먼저 dev 아래의 구성 콘텐츠를 살펴보겠습니다.

assetsSubDirectory는 기본적으로 정적 리소스 폴더를 나타냅니다. 는 "정적"입니다.

assetsPublicPath는 릴리스 경로를 나타내고,

proxyTable은 프록시 API를 자주 구성하는 곳입니다. 모든 사람이 호스트와 포트를 알고 있으므로 자세히 설명하지 않겠습니다.

autoOpenBrowser가 자동으로 실행되는지 여부 브라우저 열기

errorOverlay 쿼리 오류

notifyOnErrors 알림 오류

, poll은 devserver와 관련된 구성입니다. webpack에서 제공하는 devserver는 파일 변경 사항을 모니터링할 수 있지만 어떤 경우에는 작동하지 않습니다(

useEslint 사용 여부

showEslintErrorsInOverlay eslint 오류 프롬프트 표시 여부

devtool webpack은 디버깅을 용이하게 하는 구성을 제공합니다. 자세한 내용은 webpack 문서를 확인하세요.

cacheBusting one이 협력합니다. devtool 구성을 사용하면 캐시를 지우기 위해 파일 이름에 새 해시를 삽입할 때 소스 맵을 생성할지 여부가 개발 환경에서는 기본값이 true이지만 문서에는 "이 기능을 끄면 도움이 될 수 있습니다"라는 문장도 있습니다. 소스 맵 디버깅." 음 . . .

cssSourceMap cssSourceMap 활성화 여부

빌드 아래 구성 내용을 살펴보겠습니다.
index 컴파일 후 index.html의 경로,

path.resolve(__dirname)가 path.resolve(__dirname, '../ dist') index.js가 있는 절대 경로이고, "../dist"(노드 관련 지식) 경로를 찾으면

etsetsRoot가 패키징된 후의 파일 루트 경로, 자산SubDirectory 및 자산PublicPath는 동일

productionSourceMap 소스맵 활성화 여부,

devtool은 dev와 동일,

productionGzip 압축 여부,

productionGzipExtensions gzip 모드에서 압축해야 하는 파일의 확장자입니다. 설정 후 해당 확장자를 가진 파일이 압축됩니다.

bundleAnalyzerReport 패키징 활성화 여부 분석 보고서

현재로서는 config 폴더의 내용이 기본적으로 완료되었습니다. 이름에서 알 수 있듯이 이 세 파일은 단지 하드입니다. -코딩된 구성 파일. 지금까지 우리는 너무 많은 것을 접하지 않았습니다.

위 내용은 미래에 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

VUE2는 보조 지방 및 도시 연결 선택을 구현합니다

React를 사용하여 페이징 구성 요소 구현

React 및 Vue 프로젝트에서 SVG를 사용하는 방법

당일 시간 비교 JavaScript 크기를 통해

위 내용은 vue-cli 구성 파일(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!