vue-cli webpack3 擴充套件多模組打包

GavinZhulei發表於2019-03-02
VueWeb套件

場景

在實際的專案開發中會出現這樣的場景，專案中需要多個模組（單頁或者多頁應用）配合使用的情況，而vue-cli預設只提供了單入口打包，所以就想到對vue-cli進行擴充套件

實現

  • 首先得知道webpack是提供了多入口打包，那就可以從這裡開始改造

    新建build/entry.js

    const path = require(`path`)
const fs = require(`fs`)

const moduleDir = path.resolve(__dirname, `../src/modules`)

let entryObj = {}

let moduleItems = fs.readdirSync(moduleDir)

moduleItems.forEach(item => {
  entryObj[`${item}`] = `./src/modules/${item}/main.js`
})

module.exports = entryObj
複製程式碼

    這裡用到了nodejs的fs和path模組，可以檢視文件nodejs.cn/api/fs.html nodejs.cn/api/path.ht…，可以根據自己的專案配置更改，此處是以src/modules/資料夾下的目錄作為模組，每個模組中都有一個main.js作為入口檔案

    修改build/webpack.base.conf.js中entry

    const entryObj = require(`./entry`)
module.exports = {
  entry: entryObj
}
複製程式碼

  • 接下來就是如何將打包好的檔案注入到html中，這裡利用html-webpack-plugin外掛來解決這個問題，首先你需要有一個html的模板檔案，然後在webpack配置中更改預設的html-webpack-plugin外掛配置

    新增build/plugins.js

    const HtmlWebpackPlugin = require(`html-webpack-plugin`)

let configPlugins = []

Object.keys(entryObj).forEach(item => {
  configPlugins.push(new HtmlWebpackPlugin(
    {
      filename: `../dist/` + item + `.html`,
      template: path.resolve(__dirname, `../index.html`),
      chunks: [item]
    }
  ))
})

module.exports = configPlugins
複製程式碼

    修改build/webpack.dev.conf.js配置

    module.exports = {
    plugins: configPlugins
}
複製程式碼

    生產環境下配置與開發環境思路一致，需要注意的是html-webpack-plugin外掛引數不同，參考原vue-cli的配置

實戰

vue移動web通用腳手架

github地址: github.com/GavinZhuLei…

相關文章