ref 本機 log substr pro 往裏面 min 就是 var

基本原則

1、entry 配置多個js文件

　　webpack.base.config.js，修改entry部分：

　　原來只有一個：

　　

  entry: {
    app: "./src/main.js"
  },

　　修改成自己的多個js文件， 我的是放在src/page下存放多個頁面，每個頁面一個文件夾，下面分別是 page1/page1.js, page2/page2.js 這兩個js文件, 目錄示意如下：

　　./src

　　　　page

　　　　　　page1

　　　　　　　　page1.js

　　　　　　　　page1.html

　　　　　　　　page1.vue

　　　　　　page2

　　　　　　　　page2.js

　　　　　　　　page2.html

　　　　　　　　page2.vue

　　entry這樣改:

  entry: {
    page1: "./src/page/page1/page1.js",
    page2: "./src/page/page1/page2.js"
  },

2、plugins中允許多個html模板

　　這個需要修改webpack.dev.config.js和webpack.prod.config.js

　　原來的 new HtmlWebpackPlugin，修改tempage, filename，分別對應page1, page2的目錄即可

3、如果使用history路由，本機調試時，需要配置不同路由對應的html頁面名

　　修改webpack.dev.config.js的devServer->historyApiFallback->rewrites:

　　　　{ from: /^\/page2/, to: path.posix.join(config.dev.assetsPublicPath, ‘page2.html‘) }, 　　　　{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘page1.html‘) }, 　　在路由地址上做區分，需要page2.html解析的路由，我都在路徑中有/page2/開頭， 其它的全部默認使用page1.html解析（根據個人的情況修改這裏，如果不使用history方式，不需要修改這裏）

如果你的頁面個數是要可枚舉的，直接修改1、2在config裏寫死也是可以的（就按上面的方式即可）

（參考：https://www.cnblogs.com/moqiutao/p/8522293.html）

上面是寫死在代碼中的方式，下面是“非寫死”的方式

1、utils.js中最後增加(要安裝glob包)

// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js後綴名的文件
var glob = require(‘glob‘)
// 頁面模板
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
// 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, ‘../src/pages‘)
// 用於做相應的merge處理
var merge = require(‘webpack-merge‘)


//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js後綴文件，如果該文件存在
// 那麽就作為入口處理
exports.entries = function () {
    var entryFiles = glob.sync(PAGE_PATH + ‘/*/*.js‘)
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf(‘\/‘) + 1, filePath.lastIndexOf(‘.‘))
        map[filename] = filePath
    })
    console.log(map)
    return map
}

//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html後綴文件，然後放入數組中
exports.htmlPlugin = function () {
    let entryHtml = glob.sync(PAGE_PATH + ‘/*/*.html‘)
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf(‘\/‘) + 1, filePath.lastIndexOf(‘.‘))
        let conf = {
            // 模板來源
            template: filePath,
            // 文件名稱
            filename: filename + ‘.html‘,
            // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本
            chunks: [‘manifest‘, ‘vendor‘, filename],
            inject: true
        }
        if (process.env.NODE_ENV === ‘production‘) {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: ‘dependency‘
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    // console.log(arr)
    return arr
}

2、webpack.base.config.js修改entry處為： entry: utils.entries(),

3、webpack.dev.config.js/ webpack.prod.config.js中的HtmlWebpackPlugin註釋掉，在plugins:[...] 後面直接加上 .concat(utils.htmlPlugin())

然後，就沒有了，以後需要增加頁面，就直接在./src/page/目錄下增加文件夾就可以了。當然，你也可以將這個路徑改成可配置的，我這裏就懶得改了。

最後補充一下：多頁面之前路由跳轉使用vue路由方式是不行的，只能通過location.href這種方式

最最後吐糟一下， 一直都是單頁應用的，被逼改成多頁應用，已經實現了的代碼，業務要加一些超炫的頁面進來，找人寫好了HTML，要往裏面填數據，一堆全局CSS，absolute布局，不想重寫他們提供的CSS了，他們等著看成果。改成多頁面，和原來的布局、CSS全部分開。

VUE多頁面