本文給大家介紹vue2.0+webpack環境構造過程。
1.首先新建一個目錄vue-wkdemo，這是我們的項目目錄。執行 npm init 命令生成package.json文件。執行npm init之后，會提示你填寫一些項目的信息，一直回車默認就好了，或者直接執行 npm init -y 直接跳過詢問步驟。
2.安裝項目依賴項
npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loadervue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-devnpm install html-webpack-plugin --save-devnpm install vue --save
3.新建入口文件index.js，文件位置放置為：vue-wkdemo->app->index->index.js
import Vue from 'Vue'import Favlist from './components/Favlist.vue'Vue.config.debug = true;//開啟錯誤提示window.onload = function () {new Vue({el: '#app',components: {'my-component': Favlist}});}4.構建index.html模版，文件位置放置為：vue-wkdemo->app->index->index.html
<!DOCTYPE html><html lang="zh"><head><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><title>首頁</title></head><body><div id="app"><my-component></my-component></div></body></html>
5.構建vue組件Favlist.vue ，文件放置為：vue-wkdemo->app->components->Favlist.vue
<template id="template-home"><div><div v-for="n in 10">div</div></div></template><style>body {color: red;}</style>6.構建 webpack.config.js ，文件放置為：vue-wkdemo->build->webpack.config.js
// nodejs 中的path模塊var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 入口文件，path.resolve()方法，可以結合我們給定的兩個參數最后生成絕對路徑，最終指向的就是我們的index.js文件entry: path.resolve(__dirname, '../app/index/index.js'),// 輸出配置output: {// 輸出路徑是 myProject/output/staticpath: path.resolve(__dirname, '../output/static'),publicPath: 'static/',filename: '[name].[hash].js',chunkFilename: '[id].[chunkhash].js'},resolve: {extensions: ['', '.js', '.vue'],alias: {'Vue': 'vue/dist/vue.js'}},module: {loaders: [// 使用vue-loader 加載 .vue 結尾的文件{test: //.vue$/,loader: 'vue'},{test: //.js$/,loader: 'babel?presets=es2015',exclude: /node_modules/}]},Favlist: {loaders: {js: 'babel'}},plugins: [new HtmlWebpackPlugin({filename: '../index.html',template: path.resolve(__dirname, '../app/index/index.html'),inject: true})]}7.運行構建命令 ：