基於vue-cli的改造的多頁面開發腳手架

項目的GitHub地址：https://github.com/hellobajie/vue-cli-multipage

該腳手架同時支持vux，scss，less

目錄結構

vue-cli-multipage
  |---build
  |---config
  |---src
    |---assets  圖片
    |---comm  公共的css及js
    |---components  組件
      |---vux.vue vux的dome頁面
      |---App.vue
    |---pages  html模板文件
      |---abc.html
      |---main.html
    |---abc.js  根據該js進行頁面的打包及調試
    |---main.js 

修改配置文件

構建多頁面應用的關鍵在於向配置對象的plugins子項添加多個HtmlWebpackPlugin。

怎樣根據頁面的多少動態的添加多個HtmlWebpackPlugin呢，我們需要使用glob插件；

npm install --save-dev glob　　安裝glob插件

通過glob插件會將特定目錄下的文件名存儲為一個數組，遍歷該數據，生成多個HtmlWebpackPlugin，並插入plugins中；

//webpack.prod.conf.js
var fileList = glob.sync('./src/*.js');
var fileNameList = [];
fileList.forEach(function (item, index) {
    var name = item.match(/(\/)(\w+)(\.)/g)[0].substring(1, item.match(/(\/)(\w+)(\.)/g)[0].length - 1);
    fileNameList.push(name);
})
var obj = {};
fileList.forEach(function (item, index) {
    var filename = fileNameList[index];
    configObj.entry[filename] = item;
    configObj.plugins.push(new HtmlWebpackPlugin({
        template: './src/pages/' +filename + '.html',
        filename: filename + '.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest', 'vendor', filename]
    }))
})

//webpack.dev.conf.js
var fileList = glob.sync('./src/*.js');
  var fileNameList = [];
  fileList.forEach(function (item, index) {
      var name = item.match(/(\/)(\w+)(\.)/g)[0].substring(1, item.match(/(\/)(\w+)(\.)/g)[0].length - 1);
      fileNameList.push(name);
  })
  var obj = {};
  fileList.forEach(function (item, index) {
      var filename = fileNameList[index];
      configObj.entry[filename] = item;
      configObj.plugins.push(new HtmlWebpackPlugin({
          template: './src/pages/' + filename + '.html',
          filename: filename + '.html',
          inject: true,
          chunks: [filename]
      }))
  })

vue-cli問題優化

　　1.遇到問題：項目打包後，無法直接在本地直接打開。

　　  解決辦法：在./config/index.js文件中，build下找到assetsPublicPath，將其值改為'./'，即打包後，會在相對目錄下查找對應的資源；

　　2.遇到問題：直接打開打包後的文件，報錯webpackJsonp is not defined。

　　   解決辦法：在webpack.prod.conf.js文件中，每個遍歷生成的HtmlWebpackPlugin，配置選項中，chunks對應的數組添加'manifest','vendor'。添加這兩項的目的是將公用的資源進行單獨打包，瀏覽器緩存後，後面打開的頁面就可以直接從緩存中讀取。

　　3.遇到問題：多次打包後，未被覆蓋的文件會被保留下來。

　　   解決辦法：安裝clean-webpack-plugin插件，在webpack.prod.conf.js文件的plugins中添加如下代碼

new CleanWebpackPlugin(['dist'], {
    root: path.resolve(__dirname, '../'),
}),