摘要：說簡單點就是，有個頁面，就要在中寫個所以這里就必須要再寫一個批量生成的函數，和生成入口配置是一個道理的。熟肉在這之后還會再寫多一片文章，通過使用這個配置來對舊項目進行重構。

本文的webpack配置是基于vue-cli改良的，且面向有一定基礎的人

使用vue init webpack指令構建好一個初始的項目，刪除無關的東西，更改一下項目目錄如下
并且把src static中的文件清空

刪除package.json中無關的依賴

- "vue": "^2.4.2"
- "vue-loader": "^13.0.4",
- "vue-style-loader": "^3.0.1",
- "vue-template-compiler": "^2.4.2",

刪除build/vue-loader.conf.js

在src中創建2個文件夾分別為index about，在其中再創建3個文件index.html index.css index.js
目錄結構為

 build
 config
 src
  |———— views
  |       |———— index
  |       |       |————— index.html
  |       |       |————— index.css
  |       |       |————— index.js
  |       |
  |       |———— index2
  |               |————— index.html
  |               |————— index.css
  |               |————— index.js
  |———— static      // 存放靜態資源
  |———— lib         // 存放第三方庫

把每個頁面當做一個模塊，這樣的模塊化方便項目管理，一眼瞄過去也比較清晰

更改webpack.base.conf.js 把與vue相關的配置刪除

module.exports = {
 resolve: {
 -  extensions: [".js", ".vue", ".json"],
 +  extensions: [".js", ".json"],
alias: {
 -   "vue$": "vue/dist/vue.esm.js",
  "@": resolve("src"),
}
 },
 module: {
rules: [
-    {
-      test: /.vue$/,
-      loader: "vue-loader",
-      options: vueLoaderConfig
-    },
  {
    test: /.js$/,
    loader: "babel-loader",
-      include: [resolve("src"), resolve("test")]
+      include: [resolve("src")]
  },
 ........

在build/utils.js中，更改配置。不得不說utils.js中生成各種loader確實寫的很棒，已經把所有的與css相關的loader涵蓋進去，若要使用，只需要安裝相關的loader即可

 if (options.extract) {
 return ExtractTextPlugin.extract({
   use: loaders,
 -     fallback: "vue-style-loader"
 +     fallback: "style-loader"
 })
 } else {
 -   return ["vue-style-loader"].concat(loaders)
 +   return ["style-loader"].concat(loaders)
 }

我們不再需要vue-style-loader只需要普通的style-loader即可

既然是多頁面，那么就肯定是有多個入口

entry: {
  index: "./src/index/index.js",
  about: "./src/about/index.js"
},

這里科普一下，這里的entry路徑是相對于webpack編譯時的基礎目錄context（也就是package.json所在目錄）。路徑的詳細解釋可以參考這篇文章
頁面少的時候還ok，但是如果頁面多起來的時候全部都要自己手動去配置確實是挺麻煩的。所以這里我們來寫一段函數進行批量處理

首先我們在build文件夾下新建文件pages.json用于存放頁面的信息

{
 "root": "./src",    //    頁面存放的目錄地址
 "pages": [          //    頁面名， 打包生成的html,css,js文件也是這個名字
   "index",
   "about"
 ]
}

再在同個目錄下創建pages.conf.js用來生成頁面的路徑

var config = require("./pages.json")
var root = config.root
var pages = config.pages

function genPagesDir() {
  var dirs = {}
  for (var i = 0; i < pages.length; i++) {
    var a = pages[i]
    dirs[a] = `${root}/${a}`
  }
  return dirs
}

module.exports = genPagesDir()

跟著我們回到webpack.base.conf.js 增加生成入口配置的函數

var pages = require("./pages.conf")

........

function genEntries() {
 var entries = {}
 for (var key in pages) {
   entries[key] = `${pages[key]}/index.js`
 }
 return entries
}

并且把entry配置進行更改, 這樣就大功告成

entry: genEntries()

入口的配置完成之后，就要進行模板的配置，這里如果不了解html-webpack-plugin的，可以先去了解一下，單頁應用只有一個頁面所以模板就只有一個，那么如果是多頁面應用，則可能會存在多個模板，多個模板就必須配置多個HtmlWebpackPlugin。說簡單點就是，有n個頁面，就要在plugins中寫n個

new HtmlWebpackPlugin({
  filename: "index.html",
  template: "index.html",
  inject: true
}),

所以這里就必須要再寫一個批量生成的函數，和生成入口配置是一個道理的。

var pages = require("./pages.conf")

.......

function genHtmlWebpackPlugin() {
 var arr = [];
 for (var key in pages) {
arr.push(new HtmlWebpackPlugin({
  filename: `${key}.html`,               
  template: `${pages[key]}/index.html`,
  inject: true,
  chunks: [`${key}`]    //    chunk為該頁面要包含的js文件
}))
 }
 return arr;
}

module.exports = merge(baseWebpackConfig, {
 
 ....
 
 plugins: [
....
-  new HtmlWebpackPlugin({
-    filename: "index.html",
-    template: "index.html",
-    inject: true
-  }),
....
+ ].concat(genHtmlWebpackPlugin())
})

filename是相對于output.publicPath, 在dev-server中則是相對于其assetsPublicPath， 保持這二者相同就是為了更方便的配置
template則是相對于context（也就是上文提到的）
chunks必須寫，不然頁面將會把所有打包后的js文件引入

webpack.prod.conf.js的配置也是類似的，這里不再贅述，需要注意的是chunks需要包含vendor,manifest。 還有filename要用打包目錄dist

 filename: `${config.build.assetsRoot}/${key}.html`

至此，所有的配置都完成了~

但是，在使用的時候發現，每次要增加一個新目錄的時候都要先創建一個目錄，然后再創建3個文件，再到pages.json中添加新增的頁面。仔細想想好像還是挺麻煩的。那我們自個寫個指令來自動實現這些功能吧！

在build中創建文件create.js

在package.json中添加指令
"create": "node build/create.js"

開始碼代碼~

我們的預想是通過npm run create filename指令完成上述一系列步驟，那么我們就要知道如何去在create.js中去讀取這個filename。 其實這個參數就在變量process中，process是node的一個全局變量，這里不展開來講，有興趣的可以自己去了解。 我們可以試著打印一下process.argv的內容。
在create.js中增加以下代碼，然后執行npm run create about, 查看輸出

 var dirname = process.argv;
 console.log(dirname)

可以看到process.argv中分別包含了指令的3個部分node,create.js,about 所以，process.argv[2]就是我們想要的dirname

創建文件那就需要用到node的fs， 通過fs.mkdir來創建目錄，再通過fs.writeFile來創建文件。當然我們還需要寫一些異常處理的代碼， 當指令沒有輸入filename或文件夾已存在時，進行提示，chalk可以讓我們的cmd輸出看起來更加美觀一些。 下面為代碼

var fs = require("fs")
var chalk = require("chalk")
var root = require("./pages.json").root

var dirname = process.argv[2]
var path = `${root}/${dirname}`
var htmlTemplate = `



  
  
  
    




`
   
if (!dirname) {
   console.error(chalk.bgRed("Please input the dirname !!!
"))
   return
 }
if (fs.existsSync(path)) {
   console.error(chalk.bgRed("File is already exists !!!
"))
   return
 }
function throwErr (err) {
  if (err) {
    throw err
  }
}

fs.mkdir(path , (err) => {
   if (!err) {
fs.writeFile(`${path}/index.html`, htmlTemplate, throwErr);
fs.writeFile(`${path}/index.js`, "", throwErr);
fs.writeFile(`${path}/index.css`, "", throwErr);
console.log(chalk.bgGreen(" Create success.
"));
  }
})

到這已經完成了文件的創建功能。

接下來要寫更新pages.json的代碼，通過fs.readFile把pages.json的內容讀取進來，讀取進來的是json字符串，那么使用JSON.parse即可將其轉為對象，然后再往pages中增加新的內容，再然后使用JSON.stringify 將其轉回字符串寫回到文件中。大功告成

function updatePages() {
  var path = "build/pages.json"
  var rc = JSON.parse(fs.readFileSync(path, {encoding: "utf-8"}))
  rc.pages = rc.pages.concat(dirname)
  var wc = JSON.stringify(rc)
  fs.writeFileSync(path, wc)
}
//    記得在創建完3個文件之后updatePages()進行調用

至此所有的代碼已寫完了。之后就可以使用懶人指令進行創建文件了。只不過刪除的時候不能自動更新，需要自己到pages.json中進行刪除。

之后還會再寫多一片文章，通過使用這個webpack配置來對舊項目進行重構。
新人第一篇文章，有不對的地方望指出。_(:з」∠)_