摘要：說簡單點(diǎn)就是，有個(gè)頁面，就要在中寫個(gè)所以這里就必須要再寫一個(gè)批量生成的函數(shù)，和生成入口配置是一個(gè)道理的。熟肉在這之后還會(huì)再寫多一片文章，通過使用這個(gè)配置來對舊項(xiàng)目進(jìn)行重構(gòu)。

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

使用vue init webpack指令構(gòu)建好一個(gè)初始的項(xiàng)目，刪除無關(guān)的東西，更改一下項(xiàng)目目錄如下
并且把src static中的文件清空

刪除package.json中無關(guān)的依賴

- "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中創(chuàng)建2個(gè)文件夾分別為index about，在其中再創(chuàng)建3個(gè)文件index.html index.css index.js
目錄結(jié)構(gòu)為

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

把每個(gè)頁面當(dāng)做一個(gè)模塊，這樣的模塊化方便項(xiàng)目管理，一眼瞄過去也比較清晰

更改webpack.base.conf.js 把與vue相關(guān)的配置刪除

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確實(shí)寫的很棒，已經(jīng)把所有的與css相關(guān)的loader涵蓋進(jìn)去，若要使用，只需要安裝相關(guān)的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即可

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

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

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

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

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

再在同個(gè)目錄下創(chuàng)建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 增加生成入口配置的函數(shù)

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

........

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

并且把entry配置進(jìn)行更改, 這樣就大功告成

entry: genEntries()

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

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

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

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必須寫，不然頁面將會(huì)把所有打包后的js文件引入

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

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

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

但是，在使用的時(shí)候發(fā)現(xiàn)，每次要增加一個(gè)新目錄的時(shí)候都要先創(chuàng)建一個(gè)目錄，然后再創(chuàng)建3個(gè)文件，再到pages.json中添加新增的頁面。仔細(xì)想想好像還是挺麻煩的。那我們自個(gè)寫個(gè)指令來自動(dòng)實(shí)現(xiàn)這些功能吧！

在build中創(chuàng)建文件create.js

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

開始碼代碼~

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

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

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

創(chuàng)建文件那就需要用到node的fs， 通過fs.mkdir來創(chuàng)建目錄，再通過fs.writeFile來創(chuàng)建文件。當(dāng)然我們還需要寫一些異常處理的代碼， 當(dāng)指令沒有輸入filename或文件夾已存在時(shí)，進(jìn)行提示，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.
"));
  }
})

到這已經(jīng)完成了文件的創(chuàng)建功能。

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

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)
}
//    記得在創(chuàng)建完3個(gè)文件之后updatePages()進(jìn)行調(diào)用

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

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