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查看页面

####这时修改代码后会自动刷新!