在上面的基础上通过npm安装项目依赖项：
npm install webpack-dev-server vue-loader vue-html-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install vue --save
安装完成后，看package.json文件，看起来应该是这样的：
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^5.8.38",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-hot-reload-api": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.0",
"vue-style-loader": "^3.0.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0",
},
"dependencies": {
"vue": "^2.3.4",
"webpack": "^3.0.0"
},
安装babel一系列包，是用来解析ES6语法，开发项目使用ES6语法，不会可以先看<a href="http://es6.ruanyifeng.com/#docs/intro">阮老师的ES6教程</a>。
使用npm install vue --save命令安装了vue。
1.首先，在public文件夹创建index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id="app2">
<firstdiv></firstdiv>
</div>
</body>
</html>
2.在app文件夹下，创建index.js文件，内容如下：
import Vue from 'vue/dist/vue.js'
import Firstdiv from '../src/components/first.vue'
new Vue({
el:'#app2',
components:{
'firstdiv':Firstdiv,
}
})
3.在src/components文件夹下，创建Firstdiv.vue文件，作为创建的第一个组件，内容如下：
<template>
<div><div v-for="n in 20">div</div></div><!--组件使用v-for时，一个组件必须有一个根元素，添加外层的<div>是必要的-->
</template>
<script>
export default{
data(){
return{
msg:'hello vue !'
}
}
}
</script>
<style>
html{
font-size: 20px;
font-weight: bold;
background:blue;
}
</style>
在index.html中使用了自定义标签（即组件）
，在index.js中引用了vue和Firstdiv组件，在Firstdiv.vue文件中，使用了vue组件语法，现在我们需要使用webpack让它运行起来。
在新建的build文件夹，用来存放构建相关的代码文件等，在build文件夹下新建webpack的配置文件webpack.config.js文件。内容如下：
var path=require('path');
var HtmlWebPlugin=require('html-webpack-plugin')
module.exports={
// 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
entry:path.resolve(__dirname,'../app/index.js'),,
//输出配置
output:{
//输出路径
path:path.resolve(__dirname,'../src/js'),
publicPath:'js/',
filename:'firstvue.js',
},
resolve:{
extensions:['.js','.vue']
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
}
]
},
}
在命令行中，执行命令：
webpack --display-modules --display-chunks --config build/webpack.config.js
通过webpack命令，并且通过 –config 选项指定了我们配置文件的位置是 ‘build/webpack.config.js’，并通过 –display-modules 和 –display-chunks 选项显示相应的信息。会报错，没有发现‘../src/components/Firstdiv’模块。，当webpack去加载模块的时候，它默认是查找以 .js 结尾的文件的，它并不知道 .vue 结尾的文件是什么，所以要在配置文件中告诉webpack，遇到 .vue 结尾的也要去加载，添加 resolve 配置项，需要添加内容如下：
module.exports={
...
resolve:{
extensions:['.js','.vue']
},
...
}
然后再次执行构建命令，成功之后，输出目录会多出来一个index.html文件，双击它，代码正确执行，你可以打开这个文件查看一下，webpack自动帮我们引入了相应的文件。
网友评论