webpack에서 vue 프로젝트를 빌드하는 방법
- 亚连원래의
- 2018-06-14 17:57:175108검색
이 글에서는 주로 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>)
그런 다음 src 디렉터리에 스타일 폴더를 만들고 여기에 main.css 파일을 추가하고 다음 내용을 작성합니다
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!