摘要：前言想想也已經(jīng)做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。

想想也已經(jīng)做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。

做多了，也就對現(xiàn)有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-cli v3.0，把webpack都封進@vue/cli的sdk里了，用起來更加干凈、簡潔。

但是，對于愛折騰的我們，好吧，開個玩笑。重來，但是，對于頁面的優(yōu)化，還有項目的架構，我們不得不做多多少少的修改。

好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。

由于要介紹的很多，全寫在一篇里，有些太長了。

所以，我會分為：

創(chuàng)建開發(fā)環(huán)境下的webpack配置文件

配置eslint、babel、postcss

創(chuàng)建項目文件、目錄架構

通過koa實現(xiàn)本地數(shù)據(jù)接口模擬

創(chuàng)建發(fā)布環(huán)境下的webpack配置文件

創(chuàng)建測試環(huán)境下的webpack配置文件、以及測試用例 （TODO）

自動初始化構建項目（TODO）

這七篇來分別介紹。

創(chuàng)建項目文件夾

我們就叫vue-construct吧

初始化git

git init

初始化npm

npm init

創(chuàng)建項目文件

為了能讓webpack跑起來，而不是一口氣只講配置而不運行一下，那樣未免有些空洞，所以我們先創(chuàng)建一點項目文件和目錄。
在這之前我們先安裝兩個包：vue、vue-router， npm i -S vue vue-router。
我們將項目代碼相關文件都放在名為app的文件夾下。我先都創(chuàng)建完，然后一個個介紹。

├── app
│?? ├── app.vue
│?? ├── common
│?? │?? ├── img
│?? │?? ├── js
│?? │?? └── scss
│?? ├── index.html
│?? ├── index.js
│?? ├── router
│?? │?? └── index.js
│?? └── views
│??     └── home
│??         └── index.vue
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js

node_modules的話就忽略了。

咱們暫且不關系這些文件里的具體代碼是什么，等webpack配置完再說。

安裝一系列的包：

為了webpack的運行，需要安裝

webpack
webpack-dev-server

為了處理vue單頁文件，安裝：

vue-loader

為了處理scss文件并從js中抽離，安裝：

node-sass
style-loader
css-loader
sass-loader
vue-style-loader
postcss
postcss-loader
autoprefixer
extract-text-webpack-plugin

為了處理圖片和字體文件，安裝：

file-loader
url-loader

為了支持高級語法-babel，安裝：

babel
babel-loader
babel-plugin-syntax-dynamic-import
babel-plugin-transform-object-rest-spread
babel-polyfill
babel-preset-env

為了驗證代碼格式-eslint，安裝：

eslint
eslint-loader
eslint-plugin-html
babel-eslint

配置webpack.config.js文件

const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin")
// 為了抽離出兩份CSS，創(chuàng)建兩份ExtractTextPlugin
// base作為基礎的css，基本不變，所以，可以抽離出來充分利用瀏覽器緩存
// app作為迭代的css，會經(jīng)常改變
const isProduction = process.env.NODE_ENV === "production"
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractBaseCSS =
  new ExtractTextPlugin(
    {
      filename:"static/css/base.[chunkhash:8].css",
      allChunks: true,
      disable: !isProduction // 開發(fā)環(huán)境下不抽離css
    }
  )
const extractAppCSS
  = new ExtractTextPlugin(
    {
      filename:"static/css/app.[chunkhash:8].css",
      allChunks: true,
      disable: !isProduction // 開發(fā)環(huán)境下不抽離css
    }
  )

// 減少路徑書寫
function resolve(dir) {
  return path.join(__dirname, dir)
}

// 網(wǎng)站圖標配置
const favicon = resolve("favicon.ico")

// __dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對路徑
// __filename: 總是返回被執(zhí)行的 js 的絕對路徑
// process.cwd(): 總是返回運行 node 命令時所在的文件夾的絕對路徑
const config = {
  // sourcemap 模式
  devtool: "cheap-module-eval-source-map",
  // 入口
  entry: {
    app: [
      "babel-polyfill", // 這里是配合babel-present-env導入的動態(tài)babel-polyfill,因此npm需dev依賴
      resolve("app/index.js")
    ]
  },
  // 輸出
  output: {
    path: resolve("dev"),
    filename: "index.bundle.js"
  },
  resolve: {
    // 擴展名，比如import "app.vue"，擴展后只需要寫成import "app"就可以了
    extensions: [".js", ".vue", ".scss", ".css"],
    // 取路徑別名，方便在業(yè)務代碼中import
    alias: {
      api: resolve("app/api/"),
      common: resolve("app/common/"),
      views: resolve("app/views/"),
      components: resolve("app/components/"),
      componentsBase: resolve("app/componentsBase/"),
      directives: resolve("app/directives/"),
      filters: resolve("app/filters/"),
      mixins: resolve("app/mixins/")
    }
  },
  // loaders處理
  module: {
    rules: [
      {
        test: /.js$/,
        include: [resolve("app")],
        loader: [
          "babel-loader",
          "eslint-loader"
        ]
      },
      {
        test: /.vue$/,
        exclude: /node_modules/,
        loader: "vue-loader",
        options: {
          extractCSS: true,
          loaders: {
            scss: extractAppCSS.extract({
              fallback: "vue-style-loader",
              use: [
                {
                  loader: "css-loader",
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: "postcss-loader",
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: "sass-loader",
                  options: {
                    sourceMap: true
                  }
                }
              ]
            })
          }
        }
      },
      {
        test: /.(css|scss)$/,
        use: extractBaseCSS.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /.(png|jpe?g|gif|svg|ico)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 8192,
          name: isProduction
            ? "static/img/[name].[hash:8].[ext]"
            : "static/img/[name].[ext]"
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 8192,
          name: isProduction
            ? "static/font/[name].[hash:8].[ext]"
            : "static/font/[name].[ext]"
        }
      }
    ]
  },
  plugins: [
    // html 模板插件
    new HtmlWebpackPlugin({
      favicon,
      filename: "index.html",
      template: resolve("app/index.html")
    }),
    // 抽離出css
    extractBaseCSS,
    extractAppCSS,
    // 熱替換插件
    new webpack.HotModuleReplacementPlugin(),
    // 更友好地輸出錯誤信息
    new FriendlyErrorsPlugin()
  ],
  devServer: {
    proxy: {
      // 凡是 `/api` 開頭的 http 請求，都會被代理到 localhost:7777 上，由 koa 提供 mock 數(shù)據(jù)。
      // koa 代碼在 ./mock 目錄中，啟動命令為 npm run mock。
      "/api": {
        target: "http://localhost:7777", // 如果說聯(lián)調(diào)了，將地址換成后端環(huán)境的地址就哦了
        secure: false
      }
    },
    host: "0.0.0.0",
    port: "9999",
    disableHostCheck: true, // 為了手機可以訪問
    contentBase: resolve("dev"), // 本地服務器所加載的頁面所在的目錄
    // historyApiFallback: true, // 為了SPA應用服務
    inline: true, //實時刷新
    hot: true  // 使用熱加載插件 HotModuleReplacementPlugin
  }
}

module.exports = {
  config: config,
  extractBaseCSS: extractBaseCSS,
  extractAppCSS: extractAppCSS
}

這一篇主要就做了三件事：

創(chuàng)建簡單的項目結(jié)構

安裝了這篇，以及之后要用到npm包

配置開發(fā)環(huán)境的Webpack

下一篇我們將配置eslint、babel、postcss - 從零開始做Vue前端架構（2）

Vue前端架構-by 子咻