创建项目
先创建一个空目录,在该目录打开命令行,执行 npm init
命令创建一个项目(无法执行 npm 命令?需要先安装 Node),这个过程会提示输入一些内容,随意输入就行,完成后会自动生成一个 package.json 文件,里面包含刚才输入的内容
创建一个 index.html 页面,由于使用的是 Vue 开发单页应用,所以通常一个 html 文件就够了,内容也很简单,就一个 div#app
project
project-name
+ |- index.html
|- package.json
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
project
project-name
|- index.html
+ |- index.js
|- package.json
+ |- webpack.config.js
创建一个 index.js 作为项目的主入口,创建一个 webpack.config.js 文件作为 Webpack 的配置文件,内容如下
webpack.config.js
'use strict'
const path = require('path')
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
}
执行 npm install --save-dev webpack-cli
安装 Webpack
在 package.json 文件对应的 scripts
处写入命令
package.json
{
"scripts": {
+ "build": "webpack"
}
}
执行 npm run build
即可完成打包,打包成功后的文件放在 dist 目录里面(这是由配置文件自定义的),目前打包出来的只有一个 index.js 文件
启动本地服务
使用 webpack-dev-server 来启动本地服务,方便开发以及本地调试
执行 npm install --save-dev webpack webpack-dev-server
在 package.json 文件对应的 scripts
处写入命令
package.json
{
"scripts": {
+ "dev": "webpack-dev-server",
"build": "webpack"
}
}
执行 npm run dev
即可启动本地服务,访问 localhost:8080 即可,8080 是默认的端口号,修改端口号配置如下
webpack.config.js
module.exports = {
// ...
devServer: {
compress: true,
port: 8080
}
}
生成 HTML 文件
使用 html-webpack-plugin 来生成 HTML 文件
执行 npm install --save-dev html-webpack-plugin
在 webpack.config.js 配置文件中添加
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
})
]
}
安装 Vue
执行 npm install --save-dev vue-loader vue-template-compiler
执行 npm install --save vue vue-router
在 webpack.config.js 中配置 vue-loader 用于引入 .vue 类型文件
webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
新建一个 app.vue 文件作为路由组件的容器
project
project-name
+ |- app.vue
|- index.html
|- index.js
|- package.json
|- webpack.config.js
app.vue
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import appView from 'app.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: require('./index.vue').default
}
]
})
new Vue({
el: '#app',
router,
render(h) { return h(appView) }
})
新建一个 index.vue 文件作为首页
project
project-name
|- app.vue
|- index.html
|- index.js
|- package.json
+ |- index.vue
|- webpack.config.js
index.vue
<template>
<div>
<h1>这是首页</h1>
</div>
</template>
<script>
export default