webpack搭建vue 項(xiàng)目的步驟

更新時(shí)間：2017年12月27日 16:52:33 作者：tankboo

這篇文章主要介紹了webpack搭建vue 項(xiàng)目的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前期準(zhǔn)備

webpack
vue.js
npm
nodejs
ES6語(yǔ)法

由于本文內(nèi)容是通過(guò)npm來(lái)加載vue，所以開始之前需安裝nodejs環(huán)境，安裝完成之后再執(zhí)行以下步驟：

創(chuàng)建項(xiàng)目

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 ，關(guān)于如何使用webpack 請(qǐng)參考官網(wǎng)

npm install webpack --save-dev

如果使用npm下載的速度過(guò)慢，可以使用淘寶的cnpm 鏡像

npm install -g cnpm –registry=https://registry.npm.taobao.org

輸入以上命令即可將npm指向國(guó)內(nèi)鏡像，使用時(shí)需將npm 替換成cnpm即可，其他不變

在項(xiàng)目中創(chuàng)建webpack.config.js 文件

const path = require('path')
module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 }
}

使用webpack 命令編譯

webpack

編譯之后的項(xiàng)目目錄大概如下:

注意：在使用webpack命令之前需先創(chuàng)建 index.html 和 main.js 文件其中 main.js文件位于src 目錄下

index.html 的內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <script src="./dist/demo.js"></script>
</body>
</html>

main.js 的內(nèi)容如下

alert('hello world');

引入vue

npm install vue --save

執(zhí)行命令后會(huì)在package.json中新增如下代碼

"dependencies": { "vue": "^2.4.2" }

將main.js中的內(nèi)容修改為如下代碼

import Vue from 'vue'
var vm = new Vue({
 el:'#app',
 data:{
  msg:'hello vue'
 }
})

引入babel

npm install --save-dev babel-core babel-loader

由于在使用vue時(shí)會(huì)用到很多es6的語(yǔ)法，但是現(xiàn)在很多瀏覽器對(duì)es6的支持不是很好，所以在編譯時(shí)需要將這些語(yǔ)法轉(zhuǎn)換es5的語(yǔ)法，此時(shí)我們使用babel來(lái)進(jìn)行編譯。

babel的使用請(qǐng)閱讀官網(wǎng)文檔http://babeljs.cn/。

將babel加入到webpack.config.js 配置文件中：

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 命令即可進(jìn)行編譯，再編譯完成后用瀏覽器打開index.html 文件，此時(shí)會(huì)發(fā)現(xiàn)瀏覽器控制臺(tái)出現(xiàn)以下錯(cuò)誤：

[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>)

這是因?yàn)檎谑褂玫氖莢ue的運(yùn)行時(shí)版本，而此版本中的編譯器時(shí)不可用的，我們需要把它切換成運(yùn)行時(shí) + 編譯的版本，需要在配置文件中添加如下代碼

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
 }
 }

此時(shí)在運(yùn)行webpack 命令重新編譯，編譯后在訪問(wèn)index.html頁(yè)面，頁(yè)面內(nèi)容如下圖

此時(shí)一個(gè)基于webpack的vue 項(xiàng)目就搭建好。

webpack的一些常用配置

在項(xiàng)目的實(shí)際開發(fā)中我們還會(huì)引入css、圖片以及字體等資源文件。這些文件的引入都需要相應(yīng)的加載器才能將其加載到項(xiàng)目中并正常使用。

下面只介紹部分我們需要的加載器的使用方法, 更多信息請(qǐng)查閱webpack加載器文檔。

css加載器

我們需要引入css-loader、和style-loader (安裝style-loader的目的是為了在html中以style的方式嵌入css )。

執(zhí)行命令

npm install --save-dev css-loader style-loader

在 webpack.config.js 中進(jìn)行如下配置

module: {
  rules: [{
   test: /\.js$/,
   loader: "babel-loader",
   exclude: /node_modules/
  }, {
   test: /\.css$/,
   loader: 'style-loader!css-loader'
  }]
 },

然后再src 目錄下新建一個(gè)styles的文件夾并在里面添加一個(gè)main.css的文件,寫上以下內(nèi)容

#app{
 color:red;
}

然后再運(yùn)行 webpack 命令, 并重新加載index.html 文件 ,可見css已經(jīng)生效,效果如下圖

圖片資源的加載

使用file-loader或者url-loader加載器進(jìn)行加載，他們都是用于打包文件和圖片資源的，兩者的區(qū)別是url-loader在file-loader的基礎(chǔ)上進(jìn)行了一次封裝。

在訪問(wèn)網(wǎng)站時(shí)如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符,再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。

當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。

此處我們使用url-loader,由于它是基于file-loader的封裝，所以也需要引入file-loader。

npm install --save-dev file-loader url-loader

webpack.config.js 的rules 中增加如下配置

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000
 }
}

接下來(lái)就是將圖片引入到代碼中，需要在main.js和index.html 分別作如下修改:

main.js

import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'

var vm = new Vue({
 el:'#app',
 data:{
  logo:logo,
  msg:'hello vue'
 }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <div id="app">
  <img :src="logo" alt="logo" class="logo">
  {{msg}}
 </div>
 <script src="./dist/demo.js"></script>
</body>
</html>

最后運(yùn)行webpack 命令并訪問(wèn) index.html ，結(jié)果如下

在測(cè)試中發(fā)現(xiàn)當(dāng)圖片大于10KB的時(shí)候發(fā)現(xiàn)加載圖片失敗，找不到圖片，但此時(shí)在dist目錄下面是能看到已經(jīng)通過(guò)加載器加載成功了的圖片，再通過(guò)瀏覽器的開發(fā)者工具對(duì)圖片的引用路徑進(jìn)行檢查時(shí)，可以發(fā)現(xiàn)頁(yè)面中img的路徑不對(duì)，路徑中只有文件名缺失了前面的dist目錄,所以此時(shí)我們需要將main.js中的代碼進(jìn)行如下修改

logo:"./dist/"+logo,

重新編譯后圖片就顯示出來(lái)了。但是現(xiàn)在新的問(wèn)題又出來(lái)了，由于我們?cè)谂渲梦募信渲昧诵∮?0kb的代碼將以 base64的形式內(nèi)聯(lián)在代碼中。所以此時(shí)是不需要 "./dist" 這個(gè)前綴的。解決此問(wèn)題有兩種辦法：

不使用base64的形式將圖片內(nèi)嵌到代碼中
將html文件放到dist目錄中既然用了url-loader加載器則不推薦使用第一種。所以我們使用第二種方式。

將html文件放到dist目錄中最簡(jiǎn)單的辦法就是把index.html文件復(fù)制到dist目錄中，然后將引入就是的代碼改為：

<script src="./demo.js" > </script>

main.js中改回原來(lái)的設(shè)置

logo:logo,

重新編譯后圖片在兩種情況下都可以加載出來(lái)了。

還有一中比較常用的方式是在編譯時(shí)自動(dòng)在dist的目錄中創(chuàng)建一個(gè)html文件并將index.html中的內(nèi)容復(fù)制過(guò)去。此時(shí)我們需要時(shí)webpack的 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件

引入插件

npm install --save-dev html-webpack-plugin

webpack.config.js 中增加如下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
...

plugins:[
  new HtmlWebpackPlugin()
]

重新編譯后發(fā)現(xiàn)在dist目錄下生成了如下內(nèi)容的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>

與我們?cè)瓉?lái)自己的寫index.html相比，該文件缺少了下面這些這些內(nèi)容

<div id="app">
  <img :src="logo" alt="logo" class="logo">
  {{msg}}
 </div>

現(xiàn)在需要對(duì)配置文件做稍微的修改，讓html文件在創(chuàng)建的時(shí)候自動(dòng)將index.html的中內(nèi)容復(fù)制過(guò)去。通過(guò)查閱該插件的文檔，可知需做如下修改：

plugins:[
  new HtmlWebpackPlugin({
   title: 'vue demo',
   template: 'index.html'   
  })
]

index.html 文件中去除 script代碼，在重新編譯后，即可獲取我們需要的html文件

詳細(xì)參數(shù)配置請(qǐng)參考官方文檔

webpack-dev-server

在我們實(shí)際開發(fā)中需要將代碼部署在server中，而不是在瀏覽器中直接打開文件。此時(shí)我們需要使用webpack的 webpack-dev-server 。

webpack-dev-server 為我們提供了一個(gè)簡(jiǎn)單的web服務(wù)器，并且能夠?qū)崟r(shí)重新加載（live reloading）。

npm install --save-dev webpack-dev-server

在webpack.config.js 文件中需要指定一個(gè)文件夾,告訴開發(fā)服務(wù)器需要從哪兒加載文件

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 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問(wèn)文件。

讓我們?cè)趐ackage.json中添加一個(gè)script腳本,可以直接運(yùn)行開發(fā)服務(wù)器(dev server)：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open",
  "build": "webpack"
 },

然后輸入如下命令

npm run dev

啟動(dòng)完成后，瀏覽器會(huì)自動(dòng)打開一個(gè)訪問(wèn) http://localhost:8080/ 的頁(yè)面

此時(shí)服務(wù)已啟動(dòng)成功。

字體的加載

字體的加載方式與圖片的一樣也是用url-loader，配置如下

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000
  }
 }

vue-loader

在vue的開發(fā)過(guò)程中，通常我們需要寫.vue結(jié)尾的文件即組件，如app.vue

<template>
  <div id="app">
    <img src="./images/logo2.jpg" alt="logo" >
    {{msg}}
  </div>
</template>
<script>
  export default {
    name:'app',
    data(){
      return {
        msg:"hello vue !!"
      }
    }
  }
</script>

該文件需要通過(guò)vue-loader來(lái)進(jìn)行加載，現(xiàn)在我們需要做如下配置。通過(guò) vue-loader 和vue-template-compiler來(lái)加載并編譯.vue文件

npm install --save-dev vue-loader vue-template-compiler

webpack.config.js 中

{
  test: /\.vue$/,
  loader: 'vue-loader'
 }

為了在vue中引入對(duì).vue的使用，我們需進(jìn)行如下修改

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue demo</title>
</head>
<body>
  <div id="app">
  </div>
</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>
  <div id="app">
    <img src="./images/logo.png" alt="logo" >
    {{msg}}
  </div>
</template>
<script>
  export default {
    name:'app',
    data(){
      return {
        msg: 'hello vue !!'
      }
    }
  }
</script>

修改完成后運(yùn)行 npm run dev 命令，獲得如下效果的頁(yè)面

熱部署

在上一步中，如果我們修改app.vue文件中的msg的參數(shù)，可以看到頁(yè)面會(huì)自動(dòng)刷新。但是此時(shí)是頁(yè)面全局刷新的，如果我們只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:

new webpack.HotModuleReplacementPlugin()

然后去package.json中，script 里面dev的值中加上 --hot -only

"dev": "webpack-dev-server --hot-only --open",

然后重啟服務(wù)，再修改 msg 的值，會(huì)發(fā)現(xiàn)此時(shí)值的改變是局部刷新的。

生產(chǎn)環(huán)境

如果我們?cè)跒g覽器的控制臺(tái)中發(fā)現(xiàn)有如下提示

意思時(shí)說(shuō)項(xiàng)目現(xiàn)在運(yùn)行在開發(fā)環(huán)境中，在部署到正式環(huán)境下時(shí)，要確保它是處于production的模式。需要將代碼打包部署到生產(chǎn)環(huán)境時(shí)需要進(jìn)行如下配置：

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: