Vue+webpack 프로젝트 기본 설정 튜 토리 얼

최근 에 웹 팩 을 배우 고 있 습 니 다.수업 에 따라 한 페이지 씩 응용 하여 여기에 기록 하 세 요.이 부분 은 주로 웹 팩 의 환경 을 어떻게 설정 하 는 지,그리고 웹 팩 dev 의 설정 을 설명 합 니 다.
기록 이 비교적 대략적인 데,추 후 에는 갱 신 될 것 이다.
1.개발 환경:vscode,node.js,vue.js,webpack
여러분 이 직접 node.js 를 설치 해 주시 면 초보 튜 토리 얼 을 참고 하 실 수 있 습 니 다.
사용 하 는 IDE 는 VScode 입 니 다.
2.프로젝트 초기 화
단축 키 ctrl+`vscode 콘 솔 열기
 
vscode 인터페이스
2.1 webpack vue vue-loader 설치

npm init
npm i webpack vue vue-loader

npm 에 warn 알림 이 나타 나 면 의존 해 야 합 니 다.알림 에 따라 설치 하 십시오.
 
warn
해당 loader 설치

npm i css-loader vue-template-compiler

2.2 웹 팩 을 설정 하면 app.vue 파일 을 불 러 올 수 있 습 니 다.
먼저 src 폴 더 를 만 들 고 그 아래 에 app.vue 의 가장 주 된 코드 파일 을 만 듭 니 다.index.js 는 입구 파일 로 합 니 다.
 
기본 파일
app.vue 파일 내용 은 다음 과 같 습 니 다.

<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc'
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

src 동급 디 렉 터 리 아래
웹 팩.config.js 파일 만 들 기,입구 항목 설정,출력 출력
 
package.json 파일 과 webpack.config.js 파일 만 들 기

//webpack.config.js
const path = require('path')
module.exports = {
 entry: path.join(__dirname,'src/index.js'), //  Index.js      
 output: { //    js    bundle.js ，            
 filename: 'bundle.js', 
 path: path.join(__dirname,'dist') //    bundle.js     ，    
 },
 module: {
 rules: [{
  test: /.vue$/,
  loader: 'vue-loader'
 }]
 }
}

index.js 파일 을 입구 로 합 니 다.

//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

package.json 파일 의 scripts 명령 을 설정 하고 build 를 추가 합 니 다.

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "build": "webpack --config webpack.config.js"
 },

콘 솔 에 npm run build 명령 을 입력 하여 포장 합 니 다.포장 에 성공 한 후 그림 과 같 습 니 다.
 
웹 팩 포장 완료 후
2.3 웹 팩 을 설정 하면 비 Js 파일 을 불 러 올 수 있 습 니 다.
webpack.config.js 파일 구체 적 설정
웹 팩.config.js 의 module:{}모듈 에 rules:[]를 추가 하면 웹 팩 이 인식 해 야 할 파일 형식 을 설정 할 수 있 습 니 다.이전에 vue 파일 형식 을 설정 하여 css/그림 을 추가 해 야 합 니 다.

//webpack.config.js 
module: {
 rules: [
 {
 test: /.vue$/,
 loader: 'vue-loader'
 },
 {
 test: /.css$/,
 use:[
 'style-loader',
 'css-loader'
 ]
 },
 {
 test: /\.(gif|jpg|png|svg)$/,
 use: [{
  loader: 'url-loader',
  options: {
  limit: 1024,
  name:'[name].[ext]'
  }
 }]
 }
] 
}

콘 솔 에서 명령 을 실행 하고 해당 loader 를 설치 합 니 다.

npm i style-loader css-loader url-loader file-loader

비 js 형식 파일 패키지 효과 테스트
대상:js 코드 에서 import 이 비 js 형식의 파일 의 내용
src 하위 디 렉 터 리 에서 테스트 파일 test.css 를 만 듭 니 다.그리고 이미지 에 jpg 사진 을 넣 어서 대용(한 장 이면 돼 요.emmm 제 가 많이 넣 었 으 니까 지우 지 않 겠 습 니 다)
 
src 파일 구조
Index.js 에서 import 이 비 js 파일 들

//index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css' //import css  
import './assets/images/0.jpg' //import   
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
 render: (h) => h(App)
}).$mount(root)

마지막 으로 콘 솔 에서npm run build 테스트 결 과 를 실 행 했 습 니 다.
포장 성공 사진 은 위 와 유사 합 니 다.
2.4 css 예비 프로세서 에 대하 여stylus 설정 및 테스트
stylus 는 css 의 예비 프로세서 입 니 다.파일 형식 은.styl 입 니 다.여기 서 설정 합 니 다.
먼저 웹 팩.config.js 파일 에 있 는 rules:[]모듈 에 위 와 같이 다음 코드 를 추가 하여.styl 파일 을 식별 할 수 있 도록 합 니 다.

//webpack.config.js
  {
  test:/.styl$/,
  use: [
   'style-loader',
   'css-loader',
   'stylus-loader'
  ]
  }

그리고 콘 솔 에 stylus 에 필요 한 loader 파일 을 설치 합 니 다.

npm i style-loader stylus-loader

마지막 으로 콘 솔 에서npm run build 테스트 결 과 를 실 행 했 습 니 다.
2.5 웹 팩-dev-server 설정:개발 환경 에 전문 적 으로 사용 되 는 패키지
정식 환경 과 우리 의 개발 환경 이 다 르 기 때문에 dev 를 설정 하여 구분 해 야 합 니 다.
우선,webpack-dev-server 설치

npm i webpack-dev-server

그리고 package.json 파일 을 수정 하고 build 아래 dev 설정 을 추가 합 니 다.
 
package.json 파일 설정
그리고 webpack.config.js 를 수정 합 니 다.
전역 에 target:'웹'추가
 
config.js
이 파일 은 개발 환경 과 정식 환경 에 동시에 사용 해 야 하기 때문에 환경 판단 을 추가 하고 npm 를 뛸 때 변수 표 지 를 서로 다른 환경 에 추가 해 야 합 니 다.
windows 와 mac 환경 에서 명령 이 다 를 수 있 기 때문에 cross-env 패 키 지 를 설치 하여 개발 환경 에 따라 명령 이 같 습 니 다.

npm i cross-env

package.json 파일 을 다시 수정 합 니 다."build:"줄 에 dev 명령 을 추가 합 니 다.
cross-env NODE_ENV=development  뒤 는 변 하지 않 는 다
 
package.json 파일 빌 드
그리고 웹 팩.config.js 파일 에서 판단 합 니 다.
우선 config.devServer 설정
웹 팩 2 이후 config.devServer 로 직접 설정 할 수 있 습 니 다.
파일 헤더 몇 줄 코드 변경
 
파일 의 마지막 에 다음 코드 를 추가 합 니 다.
 
config.devServer
주의:
host:'0.0.0.0'은 localhost 를 직접 쓰 지 마 세 요.그러면 다른 사람의 컴퓨터 에 접근 할 수 없습니다.port 점용 되 지 마 세 요.안 그러면 안 열 려 요.
마지막 으로 html-webpack-plugin 플러그 인 을 설치 하여 html 를 입구 로 할 수 있 고 JS 를 자동 으로 포함 합 니 다.

npm i html-webpack-plugin

webpack.config.js 파일 수정
 
config.js
 
config.js
이로써 dev 설정 이 기본적으로 완료 되 었 습 니 다.
컨트롤 러 npm run dev 실행

npm run dev

포장 에 성공 하면 브 라 우 저 에서 효 과 를 볼 수 있 습 니 다.
오류 가 발생 하면 알림 에 따라 포트 가 점용 되 는 지 주의 하 십시오.나의 8000 포트 가 점용 되 었 는데,후에 8080 포트 를 사 용 했 으 면 좋 겠 다.
브 라 우 저 접근:localhost:8080,렌 더 링 효 과 를 볼 수 있 습 니 다.네,배경 그림 0.jpg 는 제 아이돌 23333 입 니 다.샤프심.왼쪽 상단 에 빨간색 abc 가 있 습 니 다.
 
브 라 우 저 효과
2.6 마지막 으로 config.js 에 추가 할 것 이 있 습 니 다.
마지막 으로 뭘 더 넣 어야 돼 요.
1） historyFallback:{}
단일 페이지 응용 프로그램 을 만 들 었 기 때문에 입구 index.html 에 주 소 를 추가 해 야 합 니 다.이 건 무시 합 니 다.
2)열 로드 기능.
hot 기능 은 부분 렌 더 링 을 실현 할 수 있 습 니 다.예 를 들 어 구성 요소 의 코드 를 바 꾸 었 습 니 다.페이지 는 전체 페이지 가 아 닌 이 구성 요 소 를 다시 렌 더 링 할 수 있 습 니 다.새로 고침 작업 을 할 필요 가 없습니다.
3)일부 플러그 인

webpack.HotModuleReplacementPlugin()  hot  

webpack.NoEmitOnErrorsPlugin()불필요 한 정보 제거
4)브 라 우 저 디 버 깅 코드 기능 의 도구
브 라 우 저 에서 디 버 깅 할 때 코드 가 바 뀌 지 않 습 니 다.

config.devtool = “#cheap-module-evel-source-map”

 
마지막 설정 완료 후 npm run dev 를 다시 시작 합 니 다.npm run dev성공 하면 브 라 우 저 에서 열 로드 효 과 를 테스트 하고 app.vue 파일 의 text 내용 을 수정 하면 왼쪽 상단 에 있 는 빨간색 글자 가 emmmm 로 변 하 는 것 을 볼 수 있 습 니 다.

//app.vue
<template>
 <div id="text">{{text}}</div>
</template>
<script>
 export default{
 data(){
  return {
  text: 'abc' //     ，                     。
  }
 }
 }
</script>
<style>
 #test{
 color: red;
 }
</style>

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue+webpack 프로젝트 기초 설정 튜 토리 얼 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!