摘要：一個(gè)持續(xù)可發(fā)展，不斷加入新功能，方便后期維護(hù)的目錄結(jié)構(gòu)究竟是長(zhǎng)什么樣子的接下來(lái)閏土大叔帶你們一起手摸手學(xué)起來(lái)。

如何從零開始一個(gè)vue+webpack前端工程工作流的搭建，首先我們先從項(xiàng)目的目錄結(jié)構(gòu)入手。一個(gè)持續(xù)可發(fā)展，不斷加入新功能，方便后期維護(hù)的目錄結(jié)構(gòu)究竟是長(zhǎng)什么樣子的？接下來(lái)閏土大叔帶你們一起手摸手學(xué)起來(lái)。

項(xiàng)目伊始，我們肯定是先在terminal終端命令行（以下簡(jiǎn)稱terminal）cd進(jìn)入根目錄，然后輸入 npm init 初始化一個(gè)npm項(xiàng)目，在項(xiàng)目根目錄下面就會(huì)出現(xiàn)一個(gè)package.json文件。
然后就可以安裝依賴了，直接在terminal里輸入 npm i webpack vue vue-loader -D。當(dāng)我們把這幾個(gè)安裝好以后，terminal這邊會(huì)提示我們WARN（警告??）：

翻譯過來(lái)大意是，vue-loader需要一個(gè)css-loader和vue-template-compiler作為它的第三方依賴,所以聽它的話，我們?nèi)ミM(jìn)行一下安裝：

npm i css-loader vue-template-compiler -D

那下面的警告信息提示我們?nèi)鄙僖恍┬畔?，這個(gè)其實(shí)無(wú)關(guān)痛癢，所以不需要去關(guān)心它。

通過以上簡(jiǎn)單幾個(gè)步驟，我們的項(xiàng)目就初始化好了。然后在根目錄下面創(chuàng)建一個(gè)src文件夾，這是我們?cè)创a放置的目錄。然后我們?cè)趕rc目錄下面新建一個(gè)app.vue文件，里面就可以寫一些關(guān)于項(xiàng)目的業(yè)務(wù)代碼：

當(dāng)然這個(gè)后綴為.vue 文件是不可以在瀏覽器里直接運(yùn)行的，我們需要想辦法讓它運(yùn)行起來(lái)。

現(xiàn)在我們要在項(xiàng)目根目錄下新建一個(gè)webpack.config.js文件，webpack是幫我們前端來(lái)打包資源的，前端資源有很多不同的類型，比如說(shuō)JavaScript，css，html，image，iconfont等這些資源都是需要通過http請(qǐng)求加載的東西。webpack是將一個(gè)js文件加載到瀏覽器端之后，然后去把所有的內(nèi)容去渲染出來(lái)。所以，很多時(shí)候，我們可以把js文件作為項(xiàng)目的入口文件。

這個(gè)時(shí)候，我們?cè)趕rc目錄下新建一個(gè)index.js作為入口文件，順便在里面寫點(diǎn)東西：

import Vue from "vue"
import App from "./app.vue"

const root = document.createElement("div")
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)

index.js準(zhǔn)備完畢之后，那么在webpack.config.js里面就可以這樣寫：

const path = require("path")

module.exports = {
    entry:  path.join(__dirname, "src/index.js"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist")
    }
}

在上面的代碼中，__dirname就代表這個(gè)文件所在的目錄地址，path.join()的意思就是和后面的字符串路徑拼接起來(lái)，形成一個(gè)絕對(duì)的路徑。

然后通過webpack把所有的文件打包成一個(gè)bundle.js文件，并且是能在瀏覽器里面直接運(yùn)行的代碼?，F(xiàn)在我們可以在package.json 文件里的scripts對(duì)象里面添加一個(gè)腳本：

"scripts": {
    "build": "webpack --config webpack.config.js"
}

看到這兒，肯定有童鞋要問了，為什么要在這里面調(diào)用webpack而不是在terminal里面直接運(yùn)行呢？

因?yàn)橹挥性谶@里調(diào)用webpack，它才會(huì)優(yōu)先調(diào)用我們項(xiàng)目里面安裝的webpack版本，如果我們?cè)诿钚欣锩孑斎雡ebpack，它會(huì)調(diào)動(dòng)全局的webpack，這個(gè)時(shí)候全局的webpack可能會(huì)跟我們項(xiàng)目中的webpack版本不一致，所以我們還是采取這種方式比較穩(wěn)妥。

寫完之后，我們就可以在terminal輸入 npm run build 跑一下，會(huì)尷尬地發(fā)現(xiàn)報(bào)錯(cuò)了：

這個(gè)錯(cuò)誤告訴我們，需要為.vue文件去聲明一個(gè)loader。因?yàn)閣ebpack原生是只支持JS文件類型的，并且只支持ES5的語(yǔ)法，所以我們?cè)谑褂贸鏊斫夥秶恼Z(yǔ)法的時(shí)候，我們要使用一些幫它去處理的工具。所以我們要在webpack.config.js文件里面繼續(xù)寫：

module: {
    rules: [
        {
            test: /.vue$/,
            loader: "vue-loader"
        }
    ]
}

添加完這段之后，我們?cè)偃erminal執(zhí)行下npm run build，你會(huì)發(fā)現(xiàn)項(xiàng)目根目錄下多了一個(gè)dist文件夾，點(diǎn)開里面發(fā)現(xiàn)webpack為我們自動(dòng)打包生成了一個(gè)bundle.js文件，感興趣的童鞋可以點(diǎn)開這個(gè)js文件看看：

它里面代碼很多，上面是固有的webpack的代碼，這些代碼是處理項(xiàng)目中的模塊依賴的，因?yàn)槲覀冺?xiàng)目里有很多的js相互依賴。

往下翻到100多行左右的時(shí)候，你會(huì)發(fā)現(xiàn)有很多的代碼其實(shí)是vue源碼。因?yàn)槲覀冺?xiàng)目要依賴vue.js，所以webpack會(huì)把vue.js文件打包進(jìn)來(lái)。

你可以通過快捷鍵 command (Ctrl) + F 查找關(guān)鍵詞$mount看到，紅線圈住的這段代碼就是我們自己寫的代碼，其實(shí)webpack做的工作就是把這些不同的靜態(tài)資源的類型打包成一個(gè)js，然后我們?cè)趆tml里面引用這個(gè)js，就可以正常運(yùn)行。

相信大家做前端都知道，在做一個(gè)項(xiàng)目開發(fā)的時(shí)候，我們希望把一些零碎的js文件打包到一起，這樣可以減少http請(qǐng)求。同樣的，我們希望使用模塊依賴，因?yàn)轫?xiàng)目中會(huì)做很多可復(fù)用的代碼，把它寫到一個(gè)模塊里面去，這樣的話當(dāng)我們?cè)偃懸粋€(gè)新項(xiàng)目的時(shí)候，不用再把原來(lái)的代碼重新寫一遍，或者是拷貝一份。

當(dāng)然這里面我們暫時(shí)沒有提到.babelrc、.eslintrc、editorconfig、postcss.config.js等，這些我們留到后面再講。

初始化工作完成之后，接下來(lái)我們要細(xì)分目錄了。首先我們需要在項(xiàng)目的根目錄下新建一個(gè)文件夾叫build，把webpack的文件多帶帶放到這個(gè)文件夾里面。因?yàn)槲覀冺?xiàng)目中會(huì)用到很多不同的相關(guān)文件的配置，接下來(lái)先新建一個(gè) webpack.config.base.js 文件，我們把webpack里面需要用到的共同的配置放到這個(gè)base的文件里面。比如開發(fā)環(huán)境和正式環(huán)境，以及后期我們要提到的服務(wù)端渲染的環(huán)境。我們都依賴于base這個(gè)配置。

以下是webpack.config.base.js文件里的代碼：

const path = require("path")
const createVueLoaderOptions = require("./vue-loader.config")

const isDev = process.env.NODE_ENV === "development"

const config = {
  target: "web",
  entry: path.join(__dirname, "../client/index.js"),
  output: {
    filename: "bundle.[hash:8].js",
    path: path.join(__dirname, "../dist")
  },
  module: {
    rules: [
      {
        test: /.(vue|js|jsx)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        enforce: "pre"
      },
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: createVueLoaderOptions(isDev)
      },
      {
        test: /.jsx$/,
        loader: "babel-loader"
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024,
              name: "resources/[path][name].[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  }
}

module.exports = config

然后我們?cè)傩陆ㄒ粋€(gè) webpack.config.client.js ，這個(gè)client文件依賴于base文件，在此基礎(chǔ)上擴(kuò)展一些其他配置。因此我們需要在webpack.config.client.js里面敲入一行代碼引入base文件 ：

const baseConfig = require("./webpack.config.base")

基礎(chǔ)工作做完之后，我們?cè)撊绾稳U(kuò)展配置呢？首先在terminal終端命令行安裝下 npm i webpack-merge -D 我們需要webpack-merge這個(gè)工具幫助去擴(kuò)展、合并不同的webpack配置，然后根據(jù)聲明好的isDev來(lái)判斷應(yīng)該怎么合并配置。

以下是webpack.config.client.js文件里的代碼：

const path = require("path")
const HTMLPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
const merge = require("webpack-merge")
const ExtractPlugin = require("extract-text-webpack-plugin")
const baseConfig = require("./webpack.config.base")

const isDev = process.env.NODE_ENV === "development"

const defaultPlugins = [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: isDev ? ""development"" : ""production""
    }
  }),
  new HTMLPlugin()
]

const devServer = {
  port: 8000,
  host: "0.0.0.0",
  overlay: {
    errors: true
  },
  hot: true
}

let config

if (isDev) {
  // 開發(fā)環(huán)境的配置
  config = merge(baseConfig, {
    devtool: "#cheap-module-eval-source-map",
    module: {
      rules: [
        {
          test: /.styl/,
          use: [
            "vue-style-loader",
            "css-loader",
            // {
            //   loader: "css-loader",
            //   options: {
            //     module: true,
            //     localIdentName: isDev ? "[path]-[name]-[hash:base64:5]" : "[hash:base64:5]"
            //   }
            // },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true
              }
            },
            "stylus-loader"
          ]
        }
      ]
    },
    devServer,
    plugins: defaultPlugins.concat([
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ])
  })
} else {
  // 正式環(huán)境的配置
  config = merge(baseConfig, {
    entry: {
      app: path.join(__dirname, "../client/index.js"),
      vendor: ["vue"]
    },
    output: {
      filename: "[name].[chunkhash:8].js"
    },
    module: {
      rules: [
        {
          test: /.styl/,
          use: ExtractPlugin.extract({
            fallback: "vue-style-loader",
            use: [
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  sourceMap: true
                }
              },
              "stylus-loader"
            ]
          })
        }
      ]
    },
    plugins: defaultPlugins.concat([
      new ExtractPlugin("styles.[contentHash:8].css"),
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor"
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: "runtime"
      })
    ])
  })
}

module.exports = config

最后，這個(gè)src文件夾我們要重命名一下，叫client，因?yàn)槲覀兒笃谶€要寫服務(wù)端的代碼，對(duì)應(yīng)的就命名成server，正好對(duì)應(yīng)它的含義。這樣看起來(lái)，名稱就變得更加的合理。

當(dāng)我們?nèi)f事大吉的時(shí)候，千萬(wàn)記得要把 webpack.config.base.js 和 webpack.config.client.js 里面的src路徑改掉，換成client，否則就會(huì)報(bào)錯(cuò)。

以上就是我們項(xiàng)目最終形成的目錄結(jié)構(gòu)，client目錄下分別有assets、layout、views這三個(gè)文件夾，其中assets目錄下放靜態(tài)資源，例如images、styles等；layout目錄下放通用布局的組件；views目錄下放具體的業(yè)務(wù)代碼的組件。

當(dāng)然，這個(gè)目錄其實(shí)還可以隨著項(xiàng)目的開發(fā)再細(xì)分下去，這里就不展開敘述了。

大家一定要注意，在我們正式開發(fā)項(xiàng)目、創(chuàng)建一個(gè)項(xiàng)目工程的時(shí)候，一定要先把目錄結(jié)構(gòu)理順，條理一定要清楚。每個(gè)目錄結(jié)構(gòu)里面放什么東西，心里一定要先有個(gè)概念。以后新建的文件不要亂放，因?yàn)轫?xiàng)目一旦做大，維護(hù)時(shí)間比較久的時(shí)候，可能兩三個(gè)月里面都有一個(gè)文件你不會(huì)去碰它。到時(shí)候如果要去找一個(gè)東西的時(shí)候，你會(huì)找不到它，這是非常令人難受的一件事情。

最重要的一點(diǎn)是，目錄結(jié)構(gòu)的混亂，會(huì)導(dǎo)致你后續(xù)開發(fā)項(xiàng)目的效率變得非常的低。

這次關(guān)于“一個(gè)正式項(xiàng)目的目錄結(jié)構(gòu)是怎么形成的”的話題就說(shuō)到這里，我之后的文章會(huì)講些什么呢？文章預(yù)告如下：

eslint的錯(cuò)誤修復(fù)小技巧

vue-loader是如何配置的

如何回答“對(duì)vue生命周期的理解”才能讓面試官滿意？

淺談css-module的配置

......

正式環(huán)境打包以及異步模塊打包優(yōu)化