不使用 vue-cli 与 vue 模版，使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架

说明

这是我根据慕课网上的一个课程 Vue+Webpack打造todo应用 过程一步步搭下来的框架，去掉了业务相关的逻辑。
项目最终的效果包括了引入vue框架；使用CSS预处理器；使用babel；引用图片等静态资源；区分开发环境与生成环境，并做相应优化等。基本接近真正做项目时候的配置。
但是！！ 毕竟是我个人根据练习课程搭的框架，跟真实工作可能有区别，请谨慎直接用于工作环境！！！

项目的最终成果看这里：https://gitee.com/Dandelion_/vue-webpack-scaffold
Tips：项目里面的 commit 对应文章的每一小节，所以大家善用 git checkout 命令可以很方便地切换到某个 commit 看当前版本的文件变化哦。当然直接看项目的 commit 列表也行啦。

---

0. 前言

首先不得不说 vue-cli + vue-webpack 模版真的很方便，vue init webpack my-vue-project 就搭好框架了，而且开发环境生产环境都有了。npm run dev 启动开发环境，npm run build 发布生产环境。几个命令全部搞定了。但是模版有时候可能不够灵活，或者我们想修改其中一些东西，面对这些需求的时候，理解怎么搭建起这个 vue + webpack 的环境还是很有用的。那最快捷的方式，当然是自己从头开始搭一遍啦。心动不如行动，走~~

---

1. 新建项目

因为不用 vue-cli 和 vue 模版，所以一开始我们就建个空文件夹。

mkdir my-vue-project
cd my-vue-project
npm init # 初始化项目。这时候会问你一些问题，比如项目名称、作者之类的，照着提示回答问题就好

2. 安装基本的 npm 包

首先肯定要安装 vue 和 webpack。然后 webpack 4.x已经把 cli 单独拎出来了，所以还要安装 webpack-cli；然后因为 webpack 本身其实直接能处理的只有 js 资源，是通过各种 loader 让其他资源可以被 webpack 打包处理的。那么现在我们要用 vue 写单文件组件（就是 .vue 文件），所以就还要安装 vue-loader。

npm install vue vue-loader webpack webpack-cli --save-dev # --save-dev表示这些只是开发环境所需的依赖

3. 添加项目各种入口文件

入口文件都是很普遍的那种，比如根目录下的 index.html，src 文件夹下的 main.js，app.vue 等等，我就不一一解释了。

添加入口文件后的项目目录如下：

.
├── dist/
|   ├── ...
├── src/
|   ├── main.js
|   ├── app.vue
├── node_modules/
|   ├── ...
├── index.html
├── package.json

更详细的项目结构和具体文件内容可以看 这个commit

4. 添加 webpack 配置文件

在项目根目录下添加 webpack.config.js 文件。内容如下：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: path.join(__dirname, 'src/main.js'), // 项目总入口js文件
    // 输出文件
    output: {
        path: path.join(__dirname, 'dist'), // 所有的文件都输出到dist/目录下
        filename: 'bundle.js'
    },
    module: {
        rules: [{
                // 使用vue-loader解析.vue文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                // 要加上style-loader才能正确解析.vue文件里的