Webpack4学习笔记（六）——Webpack4+VueJS2项目搭建

这是一个关于Webpack4的文章系列，其中包含以下文章:

Webpack4学习笔记（一）——基本使用
Webpack4学习笔记（二）——代码分割（单入口）
Webpack4学习笔记（三）——代码分割（多入口）
Webpack4学习笔记（四）——CSS处理
Webpack4学习笔记（五）——分离production和development环境
Webpack4学习笔记（六）——Webpack4+VueJS2项目搭建

本系列文章源代码：

git clone https://github.com/davenkin/webpack-learning.git

在上一篇文章中，我们讲到了开发环境和生产环境的分离配置，本文我们将讲到如何使用Webpack4来大家VueJS项目。

欢迎访问本文github代码。

在Vue项目中，我们通常使用vue-cli来初始化项目，但是vue-cli 2所创建出来的项目中，webpack的配置比较冗繁，并且webpack 的版本还是webpack 3。而在最新的vue-cli 3中，虽然采用了webpack 4，但是vue-cli 3索性将所有的webpack配置全部内置化了，我们并不那么容易知道其内部具体发生了什么。本文试图填补vue-cli 2和vue-cli 3之间的空白，即使用Webpack4来手动搭建VueJS项目。

工程目录结构

对于VueJS工程的目录结构，网上已经有很多最佳实践，比如这里。本文也将借鉴该文章中的目录结构，创建src目录，该目录工程主要的源代码目录，其中包含以下子目录：

.
├── Dockerfile（用于构建docker镜像，基于Nginx）
├── README.md
├── nginx.conf（Nginx配置文件）
├── package.json
├── src（源代码文件夹）
│   ├── App.vue（主组件）
│   ├── api（文件夹，存放访问后端API的js文件）
│   ├── app.html（入口HTML文件模板）
│   ├── app.js（入口js文件）
│   ├── assets（文件夹，用于存放图片、字体等资源文件，需要webpack处理）
│   │   ├── big-image.jpg
│   │   └── small-image.jpg
│   ├── components（文件夹，用于存放公用组件）
│   │   └── HelloWorld.vue
│   ├── pages（文件夹，用于存放页面级别的组件，每个page都有对应路由）
│   │   ├── Page1.vue
│   │   └── Page2.vue
│   ├── router（文件夹，用于存放路由配置）
│   │   └── index.js
│   ├── store（文件夹，用于存放vuex相关文件）
│   ├── styles（文件夹，用于存放css、sass文件）
│   │   ├── _global.scss
│   │   ├── _reset.scss
│   │   └── _variables.scss
│   └── utils（文件夹，用于存放工具文件）
├── static（文件夹，用于存放图片等资源文件，与assets不同的是，static文件夹下是文件不会经过webpack处理，而是直接被拷贝到输出目录中）
│   └── normal-image.jpg
├── webpack.base.conf.js（公共webpack配置文件）
├── webpack.dev.conf.js（development环境配置文件）
└── webpack.prod.conf.js（production环境配置文件）

入口HTML文件——src/app.html

入口HTML文件app.html只是一个模板文件，构建时webpack会将输出的js和css文件自动注入到该文件中，生成最终的index.html文件。app.html文件中应该有一个id="app"的div用于对应app.js文件中的el: '#app'。

app.html文件内容如下：




  
  
  Webpack4+VueJS2

入口js文件——src/app.js

该文件是webpack的入口文件，用于创建Vue实例，并启动整个Vue框架：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  components: {App},
  template: ''
});

可以看到，在app.js中import了Vue官方库（在webpack.base.conf.js中，配置了名为vue的别名'vue$': 'vue/dist/vue.esm.js'），另外还import了项目主组件App.vue和路由配置。对于路由配置import router from "./router";，./router只是一个文件夹，因此此时webpack会加载该文件夹下的index.js文件。另外，由于我们在webpack.base.conf.js中配置了extensions: ['.js', '.vue', '.json']，表示不止是js文件，vue和json文件均可以采用相同的方式进行import。

入口vue文件——src/App.vue

该文件被app.js引用，是vue项目的入口组件。在该文件中，我们创建了两个路由链接，分别链接到Page1.vue和Page2.vue，并通过加载Page1和Page2。

此外，我们还可以看到，我们采用了sass，并且在App.vue中引入了两个全局的sass文件，一个是meyer的_reset.scss，一个是自定义的全局_global.scss。

路由配置——src/router/index.js

前面提到，在App.vue文件中有两个链接分别链接到Page1和Page2，路由配置如下：

import Vue from "vue";
import Router from "vue-router";
import Page1 from "@/pages/Page1";
import Page2 from "@/pages/Page2";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

页面组件和公用组件

在Vue中，页面组件表示对应有路由的页面，这些组件被单独地放到了pages目录中，而公用组件表示与某个页面或者路由无关的组件，任何地方都可以引入这些组件，比如对话框组件，日历组件等。

在本例中，我们有Page1和Page2两个页面，因此对应有Page1.vue和Page2.vue两个组件。另外，两个组件都引入了公用组件HelloWorld.vue组件。

Page1组件：

HelloWorld.vue组件：

可以看到，我们采用了css module（