您的位置：首页 > Web前端 > Vue.js

vue项目构建中webpack配置(一)

2017-04-27 16:26 901 查看

由于脚手架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

安装webpack和webpack测试服务器

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

安装babel,编译es6

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

解析vue组件和.vue的文件

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

解析css

编写页面

App.vue

<template>
<div id="demo">
<p>{{msg}}</p>
</div>
</template>

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

<style scope>
* {
color: #FF0000;
}
</style>

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,否则输入webpack命令会报错不是内部命令

webpack

用webpack命令打包项目

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>

打开index.html如图所示

至此打包完成了,但是每次修改时都需要打包一次,开发时效率会很低,于是需要热重载

$ npm install -g webpack-dev-server

$ webpack-dev-server

等待程序运行完毕在浏览器中输入localhost:8080查看页面

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航