webpack에서 vue 프로젝트를 빌드하는 방법
이 글에서는 주로 webpack으로 vue 프로젝트를 구축하는 단계를 소개하고 참고하겠습니다.
준비
webpack
vue.js
npm
nodejs
ES6 구문
Si 이 기사의 내용은 npm을 통해 vue를 로드하는 것이므로 필요합니다. nodejs 환경을 설치하려면 설치가 완료된 후 다음 단계를 수행하세요.
프로젝트 만들기
mkdir vue-demo cd vue-demo
npm init 명령을 사용하여 package.json 파일을 생성하세요
npm init
대략 생성된 package.json은 다음과 같습니다.
{
"name": "vue-demo",
"version": "1.0.0",
"description": "this is a vue demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
}
}webpack을 소개해주세요. webpack 사용법은 공식홈페이지를 참고해주세요
npm install webpack --save-dev
npm을 이용한 다운로드 속도가 너무 느리다면 타오바오의 cnpm 미러
npm install -g cnpm –registry=https://registry.npm.taobao.org
위 명령어를 입력해 npm을 지정하세요. 국내 미러 사용 시 npm을 cnpm으로 교체해야 합니다. 다른 모든 것은 변경되지 않습니다
프로젝트에서 webpack.config.js 파일을 생성하세요
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
}
}webpack 명령을 사용하여 컴파일
webpack
프로젝트 디렉터리는 대략 다음과 같습니다.
참고: webpack 명령을 사용하기 전에 index.html을 만들어야 합니다. 그리고 main.js 파일은 src 디렉터리에 있습니다. html은 다음과 같습니다. vue가 소개됩니다. 명령을 실행하면 package.json에 다음 코드가 추가됩니다.
"vue": "^2.4 .2" }
main.js의 내용을 다음 코드로 수정하세요
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <script src="./dist/demo.js"></script> </body> </html>
babel 소개
alert('hello world');
vue es6 구문을 사용할 때 많이 쓰이겠지만, 지금은 많은 브라우저가 es6를 잘 지원하지 않기 때문에 이러한 구문은 컴파일 중에 es5 구문으로 변환되어야 합니다. 이때 컴파일에는 babel을 사용합니다.
Babel 사용에 대해서는 공식 홈페이지 문서 http://babeljs.cn/를 읽어보시기 바랍니다.
webpack.config.js 구성 파일에 babel을 추가합니다:
npm install vue --save
그런 다음 명령줄에 webpack 명령을 입력하여 컴파일합니다. 컴파일이 완료된 후 브라우저로 index.html 파일을 열면 다음을 찾을 수 있습니다. 브라우저 콘솔에서 다음 오류가 발생합니다:
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})이것은 vue의 런타임 버전을 사용 중이고 이 버전의 컴파일러를 사용할 수 없기 때문입니다. 구성 파일에 다음 코드를 추가합니다
npm install --save-dev babel-core babel-loader
이때 webpack 명령을 실행하여 다시 컴파일합니다. 컴파일 후 index.html 페이지에 접속하면 아래와 같은 페이지 내용이 나옵니다
이때 vue 프로젝트는 webpack을 기반으로 구축되었습니다.webpack의 몇 가지 일반적인 구성
실제 프로젝트 개발 과정에서 CSS, 이미지, 글꼴 등의 리소스 파일도 소개하겠습니다. 이러한 파일을 도입하려면 해당 파일을 프로젝트에 로드하고 정상적으로 사용하려면 해당 로더가 필요합니다.
다음은 필요한 로더 중 일부를 사용하는 방법만 소개합니다. 자세한 내용은 웹팩 로더 설명서를 참조하세요.
css loader
css-loader와 style-loader를 소개해야 합니다(style-loader를 설치하는 목적은 html에 CSS를 스타일로 삽입하기 위한 것입니다).
명령어를 실행
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
},
module:{
rules:[
{
test: /\.js$/,
loader:"babel-loader",
exclude: /node_modules/
}
]
}
}webpack.config.js에서 다음을 구성[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}그런 다음 webpack을 실행합니다. 다시 명령을 실행하고 index.html 파일을 다시 로드하면 아래와 같은 효과가 나타나는 것을 볼 수 있습니다
이미지 리소스 로딩
파일 로더 또는 URL 로더를 사용하세요 로드하려면 둘 다 파일과 이미지 리소스를 패키지하는 데 사용됩니다. 둘 사이의 차이점은 url-loader가 파일 로더를 기반으로 이를 캡슐화한다는 것입니다.
웹사이트 방문 시 사진이 많으면 http 요청이 많이 전송되어 페이지 성능이 저하됩니다. 이 문제는 url-loader로 해결할 수 있습니다. url-loader는 가져온 이미지를 인코딩하고 dataURl을 생성합니다. 이는 이미지 데이터를 문자열로 변환한 다음 해당 문자열을 파일로 패키징하는 것과 같습니다. 마지막으로 이미지에 액세스하려면 이 파일을 가져오기만 하면 됩니다.
물론 이미지가 크면 인코딩 성능이 소모됩니다. 따라서 url-loader는 제한 매개변수를 제공합니다. 제한 바이트보다 작은 파일은 DataURl로 변환되고 제한보다 큰 파일은 file-loader를 사용하여 복사됩니다. 여기에서는 url-loader를 사용합니다. 이는 파일 로더 캡슐화를 기반으로 하기 때문에 파일 로더도 도입해야 합니다.
npm install --save-dev css-loader style-loader
webpack.config.js
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
},의 규칙에 다음 구성을 추가합니다. 다음 단계는 이미지를 코드에 도입하는 것입니다. main.js와 index.html을 각각 다음과 같이 수정해야 합니다.
main.js
#app{
color:red;
}index .html
npm install --save-dev file-loader url-loader
마지막으로 webpack 명령을 실행하고 index.html에 접속하면 결과는 다음과 같습니다
在测试中发现当图片大于10KB的时候发现加载图片失败，找不到图片，但此时在dist目录下面是能看到已经通过加载器加载成功了的图片，再通过浏览器的开发者工具对图片的引用路径进行检查时，可以发现页面中img的路径不对，路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改
logo:"./dist/"+logo,
重新编译后图片就显示出来了。但是现在新的问题又出来了，由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。 解决此问题有两种办法：
不使用base64的形式将图片内嵌到代码中
将html文件放到dist目录中 既然用了url-loader加载器则不推荐使用第一种。所以我们使用第二种方式。
将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：
<script src="./demo.js" > </script>
main.js中改回原来的设置
logo:logo,
重新编译后图片在两种情况下都可以加载出来了。
还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。
HtmlWebpackPlugin 插件
引入插件
npm install --save-dev html-webpack-plugin
webpack.config.js 中增加如下配置
const HtmlWebpackPlugin = require('html-webpack-plugin') ... plugins:[ new HtmlWebpackPlugin() ]
重新编译后发现在dist目录下生成了如下内容的html的文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="demo.js"></script></body> </html>
与我们原来自己的写index.html相比，该文件缺少了下面这些这些内容
<p id="app">
<img :src="logo" alt="logo" class="logo">
{{msg}}
</p>现在需要对配置文件做稍微的修改，让html文件在创建的时候自动将index.html的中内容复制过去。通过查阅该插件的文档，可知需做如下修改：
plugins:[
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
]index.html 文件中 去除 script代码，在重新编译后，即可获取我们需要的html文件
详细参数配置请参考官方文档
webpack-dev-server
在我们实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server 。
webpack-dev-server 为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。
npm install --save-dev webpack-dev-server
在webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "demo.js"
},
plugins: [
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
],
devServer:{
contentBase:"./dist"
},
module: {
rules: [{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}上面红色字体的配置信息是告知webpack-dev-server， 在localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
让我们在package.json中添加一个script脚本,可以直接运行开发服务器(dev server)：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build": "webpack"
},然后输入如下命令
npm run dev
启动完成后，浏览器会自动打开一个访问 http://localhost:8080/ 的页面
此时服务已启动成功。
字体的加载
字体的加载方式与图片的一样也是用url-loader，配置如下
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
}vue-loader
在vue的开发过程中，通常我们需要写.vue结尾的文件即组件，如app.vue
<template>
<p id="app">
<img src="./images/logo2.jpg" alt="logo" >
{{msg}}
</p>
</template>
<script>
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
}
}
</script>该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件
npm install --save-dev vue-loader vue-template-compiler
webpack.config.js 中
{
test: /\.vue$/,
loader: 'vue-loader'
}为了在vue中引入对.vue的使用，我们需进行如下修改
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <p id="app"> </p> </body> </html>
main.js
import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})app.vue
<template>
<p id="app">
<img src="./images/logo.png" alt="logo" >
{{msg}}
</p>
</template>
<script>
export default {
name:'app',
data(){
return {
msg: 'hello vue !!'
}
}
}
</script>修改完成后 运行 npm run dev 命令 ，获得如下效果的页面
热部署
在上一步中，如果我们修改app.vue文件中的msg的参数，可以看到页面会自动刷新。但是此时是页面全局刷新的，如果我们只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:
new webpack.HotModuleReplacementPlugin()
然后去package.json中，script 里面dev的值中加上 --hot -only
"dev": "webpack-dev-server --hot-only --open",
然后重启服务，再修改 msg 的值，会发现此时值的改变是局部刷新的。
生产环境
如果我们在浏览器的控制台中发现有如下提示
意思时说项目现在运行在开发环境中，在部署到正式环境下时，要确保它是处于production的模式。需要将代码打包部署到生产环境时需要进行如下配置：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
위 내용은 webpack에서 vue 프로젝트를 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7658
15
1393
52
91
11
73
19
39
156
VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드
Jun 15, 2023 pm 06:17 PM
Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치
Vue 프로젝트에 Ace 코드 편집기를 통합하는 방법에 대한 자세한 그래픽 설명
Apr 24, 2023 am 10:52 AM
Ace는 JavaScript로 작성된 내장형 코드 편집기입니다. Sublime, Vim 및 TextMate와 같은 기본 편집기의 기능 및 성능과 일치합니다. 모든 웹페이지와 JavaScript 애플리케이션에 쉽게 삽입할 수 있습니다. Ace는 Cloud9 IDE의 메인 편집자로 유지되며 Mozilla Skywriter(Bespin) 프로젝트의 후속 버전입니다.
Vue3에서 단위 테스트를 작성하는 방법 살펴보기
Apr 25, 2023 pm 07:41 PM
Vue.js는 오늘날 프런트엔드 개발에서 매우 인기 있는 프레임워크가 되었습니다. Vue.js가 계속 발전함에 따라 단위 테스트는 점점 더 중요해지고 있습니다. 오늘은 Vue.js 3에서 단위 테스트를 작성하는 방법을 살펴보고 몇 가지 모범 사례와 일반적인 문제 및 솔루션을 제공하겠습니다.
Vue의 JSX 구문과 템플릿 구문의 간단한 비교(장단점 분석)
Mar 23, 2023 pm 07:53 PM
Vue.js에서 개발자는 JSX 구문과 템플릿 구문이라는 두 가지 다른 구문을 사용하여 사용자 인터페이스를 만들 수 있습니다. 두 구문 모두 장점과 단점이 있습니다. 차이점, 장점 및 단점을 논의해 보겠습니다.
vue가 파일 분할 업로드를 구현하는 방법에 대한 간략한 분석
Mar 24, 2023 pm 07:40 PM
실제 개발 프로젝트 프로세스에서는 상대적으로 큰 파일을 업로드해야 하는 경우가 있는데, 그러면 업로드가 상대적으로 느려지므로 백그라운드에서 파일 조각을 업로드하려면 매우 간단합니다. 기가바이트 파일 스트림이 여러 개의 작은 파일 스트림으로 절단된 다음 인터페이스는 작은 파일 스트림을 각각 전달하도록 요청됩니다.
vue3에서 Amap API를 사용하는 방법에 대해 이야기해 보겠습니다.
Mar 09, 2023 pm 07:22 PM
Amap을 사용할 때 공식적으로 많은 사례와 데모를 추천했지만 이러한 사례는 모두 기본 액세스 방법을 사용했으며 vue 또는 React의 데모를 제공하지 않았습니다. 그러나 이 기사에서는. , 우리는 vue3가 일반적으로 사용되는 Amap API를 어떻게 사용하는지 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다!
chatgpt의 타자기 효과를 구현한 vue3의 상세 예시
Apr 18, 2023 pm 03:40 PM
chatgpt 미러 사이트에서 작업하던 중 일부 미러 사이트에서는 타자기 커서 효과가 없고 텍스트 출력만 하는 것을 원하지 않았던 걸까요? 어쨌든 하고 싶어요. 그래서 열심히 공부해서 타자기와 커서의 효과를 깨달았습니다. 이제 제 해결방법과 렌더링을 공유하겠습니다~
Vue 프레임워크에서 통계 차트 시스템을 빠르게 구축하는 방법
Aug 21, 2023 pm 05:48 PM
Vue 프레임워크에서 통계 차트 시스템을 빠르게 구축하는 방법 최신 웹 애플리케이션에서 통계 차트는 필수 구성 요소입니다. 널리 사용되는 프런트엔드 프레임워크인 Vue.js는 통계 차트 시스템을 신속하게 구축하는 데 도움이 되는 많은 편리한 도구와 구성 요소를 제공합니다. 이 기사에서는 Vue 프레임워크와 일부 플러그인을 사용하여 간단한 통계 차트 시스템을 구축하는 방법을 소개합니다. 먼저 Vue 스캐폴딩 및 일부 관련 플러그인 설치를 포함하여 Vue.js 개발 환경을 준비해야 합니다. 명령줄에서 다음 명령을 실행합니다.
