一、初始化项目
1.1、新建 package.json
npm init
1.2、安装依赖
npm 安装 vue、vue-router、vue-loader、webpack、webpack-cli，这些只是开发环境所需要的依赖，使用 --save-dev 安装到开发环境（见 package.json devDependencies）下：
npm install vue vue-router vue-loader webpack webpack-cli --save-dev
webpack 4.x 已经把 cli 单独拎出来了，所以还要安装 webpack-cli。webpack 本身其实直接能处理的只有 js 资源，是通过各种 loader 让其他资源可以被 webpack 打包处理。
用 vue 写单文件组件（.vue 文件），安装 vue-loader。
1.3、创建项目目录、文件
│ index.html│ package.json│ README.md│└─src│ App.vue│ main.js│ ├─assets│ └─images│pic.png│├─components├─router│index.js│├─utils└─viewsAbout.vueHome.vue
src/App.vue
<template><div id="app">{{message}}</div></template><script>export default {name: "App",data() {return {message: "Hello!"}}}</script>
src/main.js
import Vue from 'vue'import App from "./App.vue"// 创建 Vue 实例new Vue({router,render: h => h(App)}).$mount("#app")
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>custom-project-vue</title></head><body><div id="app"></div></body></html>
二、webpack 基本配置
2.1、添加配置文件
根目录下新建 webpack.config.js，配置 webpack：
const path = require('path') // 系统路径模块const htmlWebpackPlugin = require('html-webpack-plugin') // 引入模板渲染插件const VueLoaderPlugin = require('vue-loader/lib/plugin') // 将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块module.exports = {entry: path.join(__dirname, './src/main.js'), // 项目总入口 js 文件// 输出文件output: {path: path.join(__dirname, 'dist'), // 所有的文件都输出到 dist 目录下filename: 'bundle-[hash].js' // 输出文件的名称加上 hash 值},module: {rules: [{// 使用 vue-loader 解析 .vue 文件test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,// 要加上 style-loader 才能正确解析 .vue 文件里的 <style> 标签内容use: ['style-loader', 'css-loader']}]},plugins: [new htmlWebpackPlugin({filename: 'index.html', // 生成的文件名称template: 'index.html', // 指定用 index.html 做模版inject: 'body' // 指定插入的 <script> 标签在 body 底部}),new VueLoaderPlugin()]}
添加了一些引用 style-loader、css-loader，需要安装：
npm install html-webpack-plugin style-loader css-loader vue-template-compiler --save-dev
安装并引入 html-webpack-plugin 的目的是在打包项目的时候，在 dist 文件夹下也会生成 index.html 文件，也会添加上对出口文件的引用。
2.2、开启本地服务
webpack-dev-server 可以在本地启动一个服务器，而且当有任何文件修改的时候会自动重新打包，并且刷新浏览器页面。
安装 webpack-dev-server，配置本地开发环境：
npm install webpack-dev-server cross-env --save-dev
用上 cross-env 是因为要修改 package.json 里的 scripts，而不同的平台写 scripts 的方式不一样。
修改 package.json 里的 scripts：
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js"},
执行 npm run dev，项目成功启动后会自动打开浏览器。
2.3、添加构建脚本
在 package.json 文件的 scripts 属性里添加 build 脚本:
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --config webpack.config.js","build": "webpack --config webpack.config.js"},
2.4、打包项目测试
完成以上配置后运行 npm run build 来构建项目，可以看到在当前目录下生成了一个 dist 目录，目录下有一个 bundle.js 和 index.html 文件，这就是打包好的项目。
2.5、添加图片、CSS 预处理器等 loader
图片 loader 用的是 url-loader，它依赖于 file-loader，比 file-loader 多了一个可以把小于一定大小的图片直接转化成 base64 的形式插入到 html 页面，可以减少网络请求。
安装依赖：
npm install file-loader url-loader node-sass sass-loader --save-dev
修改 webpack.config.js，在 module rules 下添加：
// ...{test: /\.scss$/,use: [// 处理顺序是从 sass-loader 到 style-loader'style-loader','css-loader','sass-loader']}, {test: /\.(gif|jpg|jpeg|png|svg)$/i,use: [{loader: 'url-loader',options: {// 当文件大小小于 limit byte 时会把图片转换为 base64 编码的 dataurl，否则返回普通的图片limit: 5120000, // 500k 以下转为 base64name: 'dist/assest/images/[name]-[hash:5].[ext]' // 图片文件名称加上内容哈希}}]}// ...
2.6、添加 postcss-loader + autoprefixer，自动添加 css 浏览器前缀
npm install postcss-loader autoprefixer --save-dev
新增 postcss 配置文件 postcss.config.js：
const autoprefixer = require('autoprefixer')module.exports = {plugins: [autoprefixer({browsers: ['last 5 versions']})]}
webpack.config.js：
{test: /\.css$/,// 要加上 style-loader 才能正确解析 .vue 文件里的 <style> 标签内容use: ['style-loader', {loader: 'css-loader',options: {importLoaders: 1}},'postcss-loader']},{test: /\.scss$/,use: [// 处理顺序是从 sass-loader 到 style-loader'style-loader','css-loader',{loader: 'postcss-loader',options: {sourceMap: true}},'sass-loader']},
2.7、添加 babel-loader，转译 es6 代码为 es5 代码
项目根目录创建 .babelrc 文件：
{"presets": ["env"]}
安装依赖：
npm install babel-loader@7 babel-core babel-preset-env --save-dev
修改 webpack.config.js，module.rules 再加一条：
{// 转译 es6 代码为 es5 代码test: /\.js$/,exclude: /(node_modules|bower_components)/, // 不处理这两个文件夹里的内容loader: 'babel-loader'}
2.8、清除旧的 bundle.js
每次修改文件，npm run build 之后，都会生成一个新的 bundle-[hash].js 文件，添加 clean-webpack-plugin，每次 build 之前可以自动先清除输出文件夹。
安装 clean-webpack-plugin：
npm install clean-webpack-plugin --save-d
修改 webpack.config.js，引入 clean-webpack-plugin 并在 plugins 数组添加一项：
const {CleanWebpackPlugin} = require("clean-webpack-plugin") // 清除输出文件夹plugins: [new CleanWebpackPlugin()]
2.9、添加可以自动解析的扩展
import 的时候可以不用写后缀也能正确引用文件，例如：
import App from './App'
打开 webpack.config.js，添加 resolve：
resolve: {extensions: ['.js', '.json', '.vue']},
三、路由配置
src/router/index.js
import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]const router = new VueRouter({routes})export default router
在 main.js 中引入路由配置文件：
import router from './router'
在 App.vue 中添加 router-link：
<template><div id="app"><router-view></router-view><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></div></template>
项目结构：
│ .babelrc│ .gitignore│ index.html│ LICENSE│ package-lock.json│ package.json│ postcss.config.js│ README.md│ webpack.config.js│ ├─dist│bundle-40277308b55fa87c0dd3.js│index.html│ └─src│ App.vue│ main.js│ ├─assets│ └─images│pic.png│├─components├─router│index.js│├─utils└─viewsAbout.vueHome.vue
GitHub
