快捷導(dǎo)航

詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版

更新時間：2017年04月05日 10:08:08 作者：dahuzix

本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

npm init -y 初始化項目

安裝各種依賴項

npm install --save vue 安裝vue2.0

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測試服務(wù)器，默認(rèn)安裝是1.0版本的，所以必須指定版本號

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel，一般的瀏覽器是不認(rèn)識es6語法的，babel的作用是將es6的語法編譯成瀏覽器認(rèn)識的語法

npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue后綴的文件

npm install --save-dev css-loader file-loader 用來解析css

編寫頁面

新建目錄src，里面新建App.vue

<!-- 簡單寫個title和一個循環(huán) -->
<template>
  <div id="example">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="n in 5">{{ n }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
#example {
  background: red;
  height: 100vh;
}
</style>

在src目錄下新建main.js

/* 引入vue和主頁 */
import Vue from 'vue'
import App from './App.vue'

/* 實例化一個vue */
new Vue({
 el: '#app',
 render: h => h(App)
})

配置webpack

在根目錄下新建webpack.config.js

/* 引入操作路徑模塊和webpack */
var path = require('path');
var webpack = require('webpack');

module.exports = {
  /* 輸入文件 */
  entry: './src/main.js',
  output: {
    /* 輸出目錄，沒有則新建 */
    path: path.resolve(__dirname, './dist'),
    /* 靜態(tài)目錄，可以直接從這里取文件 */
    publicPath: '/dist/',
    /* 文件名 */
    filename: 'build.js'
  },
  module: {
    rules: [
      /* 用來解析vue后綴的文件 */
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      /* 用babel來解析js文件并把es6的語法轉(zhuǎn)換成瀏覽器認(rèn)識的語法 */
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /* 排除模塊安裝目錄的文件 */
        exclude: /node_modules/
      }
    ]
  }
}

打包項目

npm install -g webpack@^2.1.0-beta.25 全局安裝webpack，以便使用webpack命令

webpack 用webpack命令打包項目，這是目錄下會多出一個dist文件夾，查看里面會有build.js，發(fā)覺里面的es6語法已經(jīng)被轉(zhuǎn)化了

最終項目目錄如圖所示

在根目錄下新建index.html，引入build.js

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
  <section id="app"></section>
  <script src="./dist/build.js"></script>
</body>
</html>

頁面如圖所示