pages目录下页面太多时有些混乱

[amnextking]

现在用框架写了不少页面了，但是pages目录下不支持再新建目录，找起来有些麻烦。 看了下webpack的配置找到了关于pages目录，但是新手不知道要怎么改好，作者有时间看下能不能支持pages下新建目录，哪怕只有一级子目录也好。 配置代码如下：

// Collect the page's names
const files = readdirSync('./src/pages')
let entry = {}, htmlWebpacks = []
for (let file of files) {
    let page = file.substr(0, file.indexOf('.'))
    entry[page] = `./src/pages/${page}.vue`
    htmlWebpacks.push(new HtmlWebpackPlugin({
        name: page,
        vuejs: 'vue.js',
        filename: `${page}.html`,
        chunks: [page, 'runtime'],
        template: './src/templates/page.ejs'
    }))
}

[grapewheel]

恩，这里修改下就能支持子目录，你也可以通过命名来规范页面，例如 useLogin.vue，userRegister.vue，后续修改下就好

[amnextking]

webpack.dev.js:

const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const base = require('./webpack.base')
// const readdirSync = require('fs').readdirSync
const path = require('path')
const fs = require('fs')

// Collect the page's names
// const files = readdirSync('./src/pages')
let files = []
function readAllDirSync(path) {
  var pa = fs.readdirSync(path)
  pa.forEach(function(ele, index) {
    var info = fs.statSync(path + '/' + ele)
    if (info.isDirectory()) {
      readAllDirSync(path + '/' + ele)
    } else {
      files.push(path + '/' + ele)
    }
  })
}
readAllDirSync('./src/pages')
let entry = {},
  htmlWebpacks = []
for (let file of files) {
  // let page = file.substr(0, file.indexOf('.'))
  let page = file.substr(file.lastIndexOf('/') + 1, file.lastIndexOf('.') - file.lastIndexOf('/') - 1)
  // entry[page] = `./src/pages/${page}.vue`
  entry[page] = file

  htmlWebpacks.push(
    new HtmlWebpackPlugin({
      name: page,
      vuejs: 'vue.js',
      filename: `${page}.html`,
      chunks: [page, 'runtime'],
      template: './src/templates/page.ejs'
    })
  )
}

将代码修改为如上可支持子目录，作者看下这样写没有其他问题吧？ 如果没问题的话我发个PR或者下个版本加上这个功能吧。

[grapewheel]

好的，感谢您的支持，我这边新版本会加上去

[buildnewapp]

webpack.dev.js:

const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
const base = require('./webpack.base')
// const readdirSync = require('fs').readdirSync
const path = require('path')
const fs = require('fs')

// Collect the page's names
// const files = readdirSync('./src/pages')
let files = []
function readAllDirSync(path) {
  var pa = fs.readdirSync(path)
  pa.forEach(function(ele, index) {
    var info = fs.statSync(path + '/' + ele)
    if (info.isDirectory()) {
      readAllDirSync(path + '/' + ele)
    } else {
      files.push(path + '/' + ele)
    }
  })
}
readAllDirSync('./src/pages')
let entry = {},
  htmlWebpacks = []
for (let file of files) {
  // let page = file.substr(0, file.indexOf('.'))
  let page = file.substr(file.lastIndexOf('/') + 1, file.lastIndexOf('.') - file.lastIndexOf('/') - 1)
  // entry[page] = `./src/pages/${page}.vue`
  entry[page] = file

  htmlWebpacks.push(
    new HtmlWebpackPlugin({
      name: page,
      vuejs: 'vue.js',
      filename: `${page}.html`,
      chunks: [page, 'runtime'],
      template: './src/templates/page.ejs'
    })
  )
}

将代码修改为如上可支持子目录，作者看下这样写没有其他问题吧？ 如果没问题的话我发个PR或者下个版本加上这个功能吧。

你这个有问题啊，这个文件不能重名了啊，而且最后的文件打包地址和src目录结构不一致

[amnextking]

是的，这个只是在src时支持子目录，输出时都在dist目录下。如需要输出时也分目录，请修改输出配置。

On Fri, May 31, 2019, 11:32 PM syxchina notifications@github.com wrote:

webpack.dev.js:

const merge = require('webpack-merge')

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

const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin

const CopyWebpackPlugin = require('copy-webpack-plugin')

const base = require('./webpack.base')

// const readdirSync = require('fs').readdirSync

const path = require('path')

const fs = require('fs')

// Collect the page's names

// const files = readdirSync('./src/pages')

let files = []

function readAllDirSync(path) {

var pa = fs.readdirSync(path)

pa.forEach(function(ele, index) {

var info = fs.statSync(path + '/' + ele)

if (info.isDirectory()) {

  readAllDirSync(path + '/' + ele)

} else {

  files.push(path + '/' + ele)

}

})

}

readAllDirSync('./src/pages')

let entry = {},

htmlWebpacks = []

for (let file of files) {

// let page = file.substr(0, file.indexOf('.'))

let page = file.substr(file.lastIndexOf('/') + 1, file.lastIndexOf('.') - file.lastIndexOf('/') - 1)

// entry[page] = ./src/pages/${page}.vue

entry[page] = file

htmlWebpacks.push(

new HtmlWebpackPlugin({

  name: page,

  vuejs: 'vue.js',

  filename: `${page}.html`,

  chunks: [page, 'runtime'],

  template: './src/templates/page.ejs'

})

)

}

将代码修改为如上可支持子目录，作者看下这样写没有其他问题吧？ 如果没问题的话我发个PR或者下个版本加上这个功能吧。

你这个有问题啊，这个文件不能重名了啊，而且最后的文件打包地址和src目录结构不一致

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/grapewheel/avvw/issues/14?email_source=notifications&email_token=ACXRGDV2JQNAP43YXF2A7FDPYFAJLA5CNFSM4HMHCMRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWVR33A#issuecomment-497753580, or mute the thread https://github.com/notifications/unsubscribe-auth/ACXRGDTRDUVKEO2PL6VM3LTPYFAJLANCNFSM4HMHCMRA .

[grapewheel]

https://github.com/grapewheel/avvw/tree/vue3-cli v1.3.0版本已经支持多级目录，可尝试下