vue項目構建中webpack配置(一)

由於腳手架vue-cli的存在,我們在做vue項目時基本都是用vue-cli搭建的,這就不需要我們自己配置webpack了.但在實際開發過程中會發現對webpack不了解的話會出現很多問題.如vue的作者尤雨溪在新手向:Vue2.0的建議學習順序中所說,了解前端生態/工程化，學習 Webpack 相當重要.在這里我就分享一下我用webpack搭建的Vue項目.

首先我們簡單建立一個項目結構

on文件

 $ npm init

接下來便是安裝各種依賴項

 $ npm install --save vue
```安裝vue2.0

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

$ npm install --save-dev babel-core babel-loader babel-preset-es2015

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

$ npm install --save-dev css-loader file-loader

####編寫頁面

#####App.vue

#####main.js

import Vue from 'vue'
import App from './APP.vue'

new Vue({
el: '#app',
render: h => h(App)
})

#####webpack.config.js

var path = require('paht') // 引入操作路徑模塊

module.exports = {
// 輸入文件
entry: './src/main.js',
output: {
// 輸出目錄
path: path.resolve(__dirname, './dist'),
// 靜態目錄,從這里取文件
publicPath: '/dist/',
// 文件名
filename: 'index.js'
},
module: {
rules: [
//解析vue后綴文件
{test: /.vue$/, loader: 'vue-loader'},
//用巴babel解析js文件 排除模塊安裝目錄的文件
{test: /.js$/, loader: 'babel-loader',exclude: /node_modules/}
]
}
}

####打包項目

$ npm install -g webpack

webpack

####再index.html中引入打包生成的index.js

``` ####打開index.html如圖所示 

至此打包完成了,但是每次修改時都需要打包一次,開發時效率會很低,於是需要熱重載

$ npm install -g webpack-dev-server

$ webpack-dev-server
```等待程序運行完畢在瀏覽器中輸入localhost:8080查看頁面

####這時修改代碼后會自動刷新!