vue-loader란 무엇인가
이 글을 쓰기에 앞서 오늘 이야기할 주인공에 대해 먼저 살펴보겠습니다. - vue-loader, 당신은 그것에 대해 얼마나 알고 있나요?
이것이 오늘 내 답변입니다. 실제로 vue-loader는 .vue 파일을 처리하는 데 사용되는 webpack 로더입니다.
.vue 파일은 HTML과 유사한 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 정의 파일 형식입니다. 각 .vue 파일에는 템플릿, 스크립트, 스타일이라는 세 가지 유형의 최상위 언어 블록이 포함되어 있습니다.
vue-loader는 파일을 구문 분석하고, 각 언어 블록을 추출하고, 필요한 경우 다른 로더를 통해 처리합니다(예: lt; scriptgt; 기본값은 babel-loader, lt; stylegt; 기본값은 style-loader) 처리), 마지막으로 이를 CommonJS 모듈로 어셈블하고 module.exports는 Vue.js 구성 요소 개체를 생성합니다.
vue-loader는 언어 블록의 lang 속성을 설정하여 CSS 전처리기 및 미리 컴파일된 HTML 템플릿 언어와 같은 기본이 아닌 언어의 사용을 지원합니다. 예를 들어 다음과 같이 Sass 구문을 사용하여 스타일을 작성할 수 있습니다.
lt style lang="sass"gt; /* write Sass! >lt;/stylegt;
vue-loader가 무엇인지 알고 나면 먼저 프로젝트를 생성해 보겠습니다. vue-loader에 대해 빠르게 이야기하려면 스캐폴딩 도구 @vue/cli를 사용하여 vue-loader를 사용하여 프로젝트를 생성하는 것이 좋습니다:
npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run Serve
시간이 걸릴 수 있으므로 이 프로세스 동안 기다리겠습니다. ..
브라우저에 localhost:8080을 입력하면 브라우저는 Vue.js 앱에 오신 것을 환영합니다 환영 페이지를 친절하게 렌더링합니다.
다음으로 능숙한 편집기를 열어야 합니다. 여기서는 VSCode를 선택하고 프로젝트를 가져옵니다. 구성이 없는 일부 간단한 프로젝트만 포함된 원본 프로젝트 디렉터리가 표시됩니다. vue-loader용 파일:
먼저 프로젝트 루트 디렉터리 아래에 새 webpack.config.js 파일을 생성한 다음 오늘 주제를 시작해야 합니다.
CSS를 별도의 파일로 수동 구성
CSS 파일 추출에 관해 말하자면, 먼저 터미널로 이동하여 관련 npm 패키지를 설치해야 합니다:
npm install extract -text-webpack-plugin --save-dev
먼저 짧은 답변을 드리겠습니다. 코드는 다음과 같습니다:
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// 기타 옵션...
모듈: {
규칙: [
{
테스트: /\.vue$/,
로더: 'vue-loader ' ,
옵션: {
extractCSS: true
}
}
]
},
플러그인: [
new ExtractTextPlugin("style.css")
]
}
위 내용은 *.vue 파일의
이것은 *.vue 파일만 추출한다는 점에 유의하세요. 하지만 JavaScript로 가져온 CSS는 여전히 별도로 구성해야 합니다.
다음으로 수동으로 구성하는 방법을 살펴보겠습니다:
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack- 플러그인")
module.exports = {
// 기타 옵션...
모듈: {
규칙: [
{
테스트: /\.vue$/,
로더: 'vue-loader',
옵션: {
로더: {
css: ExtractTextPlugin.extract({
사용: 'css-loader',
대체: 'vue-style -loader' // 이는 vue-loader의 종속성입니다.
})
}
}
}
]
},
플러그인: [
new ExtractTextPlugin("style.css")
]
}
이렇게 하면 모든 Vue 구성 요소에서 처리된 모든 CSS가 단일 CSS 파일로 추출됩니다.
프로덕션 환경 구축 방법
프로덕션 환경은 두 가지 목적으로 패키지됩니다: 1. 애플리케이션 코드 압축 2. Vue.js에서 경고 제거.
다음 구성은 참조용입니다:
// webpack.config.js
module.exports = {
// .. 기타 옵션
플러그인: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV : '"프로덕션"'
}
}),
new webpack.optimize.UglifyJsPlugin()
]
}
물론 개발 중에 이러한 구성을 사용하지 않으려면 이 문제를 해결하는 두 가지 방법이 있습니다.
1. 동적으로 빌드;
p>예: const isDev = process.env.NODE_ENV==='development'
또는: const isProd = process.env.NODE_ENV === ' 프로덕션'
2. 두 개의 개별 webpack 구성 파일을 사용합니다. 하나는 개발 환경용이고 다른 하나는 프로덕션 환경용입니다. 세 번째 파일에 사용할 수 있는 구성을 넣습니다.
Daniel의 경험에서 배우기
여기 vue-hackernews-2.0이라는 온라인 표준 작성 방법이 있습니다. 포털은 다음과 같습니다: /vuejs/vue-hackernews-2.0
p >사용된 구성 파일 webpack.base.config.js의 코드는 다음과 같습니다:
const path = require('path')
const webpack = require( 'webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const FriendlyErrorsPlugin = require('Friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const isProd = process.env.NODE_ENV === 'production'
모듈 내보내기 = {
devtool: isProd
? false
: '#cheap-module-source-map',
출력: {
경로: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
파일 이름: '[ 이름] .[chunkhash].js'
},
해결: {
별칭: {
'public': 경로 .resolve (__dirname, '../public')
}
},
모듈: {
noParse: /es6 -promise \.js$/, // 웹팩 시밍 프로세스 방지
규칙: [
{
테스트: /\.vue$/,
로더: 'vue-loader',
옵션: {
컴파일러 옵션: {
PreserveWhitespace: false
}
}
},
{
테스트: /\.js$/,
로더: ' babel-loader',
제외: /node_modules/
},
{
테스트: /\.(png |jpg |gif|svg)$/,
로더: 'url-loader',
옵션: {
제한: 10000,
이름: '[이름].[ext]?[해시]'
}
},
{
테스트: /\.style(u
s)?$/,
사용: isProd
? ExtractTextPlugin.extract({
사용: [
{
로더: 'css-loader',
옵션: { 최소화: true }
},
'stylus-loader'
],
대체: 'vue-style-loader'
})
: ['vue-style-loader', 'css -loader', 'stylus-loader']
},
]
},
성능: {
maxEntrypointSize: 300000,
힌트: isProd ? '경고': false
},
플러그인: isProd
? [
new VueLoaderPlugin(),
new webpack.optimize.UglifyJsPlugin({
압축: { 경고: false }
} ),
new webpack.optimize.ModuleConcatenationPlugin(),
new ExtractTextPlugin({
파일 이름: 'common.[chunkhash].css'
})
]
: [
새로운 VueLoaderPlugin(),
새로운 FriendlyErrorsPlugin()
]
}
그런 다음 개발 환경을 위한 webpack.client.config.js 구성이 어떻게 작성되었는지 살펴보세요.
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const config = merge(base, {
항목: {
앱: './src/entry-client.js'
},
해결: {
별칭: {
'create-api': './create-api-client.js'
}< / p>
},
플러그인: [
// 제거
Vue 소스의 개발 전용 코드
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') ,
'process.env.VUE_ENV': '"client"'
}),
// 더 나은 캐싱을 위해 공급업체 청크 추출
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// 모듈은 if...
return (
// node_modules 내부에 있음
/node_modules/.test(module.context) amp; amp ;
// CSS 파일이 아닙니다(extract-text-webpack-plugin 제한으로 인해)
!/\.css$/.test(module.request)
)
}
}),
// 공급업체 청크 해시 변경을 방지하기 위해 웹팩 런타임 앰프 매니페스트를 추출합니다.
// 모든 빌드에서.
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new VueSSRClientPlugin()
]
})
if (process.env.NODE_ENV === '프로덕션') {
config.plugins.push(
// 서비스 워커 자동 생성
new SWPrecachePlugin({
캐시Id: 'vue-hn',
파일 이름: 'service-worker.js',
축소: true,
dontCacheBustUrlsMatching: /./,
staticFileGlobsIgnorePatterns: [/\ .map$/, /\.json$/],
런타임 캐싱: [
{
urlPattern: '/',
핸들러: 'networkFirst'
},
{
urlPattern: /\/(top|new|show|ask|jobs)/,
핸들러: 'networkFirst'
},
{
urlPattern: '/item/:id',
핸들러: 'networkFirst'
},
{
urlPattern: '/user/:id',
핸들러 : 'networkFirst'
}
]
})
)
}
module.exports = config
마지막으로 개발 환경에서 webpack.server.config.js 구성을 작성하는 방법을 살펴보겠습니다.
const webpack = require ('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(base , {
대상: '노드',
devtool: '#source-map',
항목: './src/entry- server.js ',
출력: {
파일 이름: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
해결: {
별칭: {
'create-api': './create-api-server.js'
}
},
// /liady/webpack-node-externals
외부: nodeExternals({
// dep
화이트리스트에서 가져와야 하는 경우 CSS 파일을 외부화하지 마세요: /\.css$/
}),
플러그인 : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || '개발'),
'process.env.VUE_ENV': '"서버"'
}),
new VueSSRServerPlugin()
]
} )
코드 검사를 수행하는 방법
질문이 있을 수 있습니다. .vue 파일을 어떻게 검사합니까?
JavaScript가 아니므로 코드를 확인하세요. 우리는 당신이 ESLint를 사용한다고 가정합니다(그렇지 않다면 사용해야 합니다!).
먼저 eslint-loader를 설치해야 합니다:
npm install eslint eslint-loader --save-dev
그런 다음 이를 프리로더에 적용합니다.
// webpack.config.js
module.exports = {
// ... 기타 옵션
모듈: {
규칙: [
{
적용: '사전',
테스트: /\.(js|vue)$ / ,
로더: 'eslint-loader',
제외: /node_modules/
}
]
}
}
이렇게 하면 개발 중에 .vue 파일을 저장할 때마다 자동으로 확인됩니다.