app
 -libs # 第三方插件库，可以是css也可以是js，eg：jq
 -static # 公共的静态资源文件夹
 -temlates # 模板文件夹
  -*** # 模块文件夹
  -css # 当前模块独有的css文件需要在index.js中import
  -html # 模板文件，计划支持html，pug两种模板语言
  -index.js # 当前模块入口文件

npm i webpack webpack-dev-server -g

npm i webpack webpack-dev-server --save-dev

// 未指定这手动指定为生产环境
process.env.NODE_ENV = process.env.NODE_ENV "" );
// 根据环境变量引用相关的配置文件
module.exports = require( `./config/webpack.config.${env}.js` )

function getEntryDir() {
  let globPath = 'app/templates/**/*.' + config.tplLang
  // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
  let pathDir = 'app(\/|\\\\)(.*"htmlcode">

getEntryDir()
  .forEach( ( page ) => {
    let moduleName = page.split( '/' )
    let moduleNameStr = moduleName[ moduleName.length - 1 ]
    const htmlPlugin = new HTMLWebpackPlugin( {
      filename: `${moduleNameStr}.html`,
      template: path.resolve( __dirname, `../app/${page}/html/index.${config.tplLang}` ),
      chunks: [ moduleNameStr, 'vendors' ],
    } );
    HTMLPlugins.push( htmlPlugin );
    Entries[ moduleNameStr ] = path.resolve( __dirname, `../app/${page}/index.js` );
  } )


关于HTMLWebpackPlugin的用法，可以参照html-webpack-plugin用法全解 以及 官方文档 已经写的非常详尽了。
第三方库入口自动获取


function getVendors() {
  let globPath = `app/${config.libraryDir}/**/*.*`
  let files = glob.sync( globPath )
  let libsArr = []
  files.forEach( ( v, i ) => {
    libsArr.push( './' + v )
  } )
  return libsArr
}
Entries[ 'vendors' ] = getVendors() // 第三方类库


其中多页面入口和第三方库配置，请看这篇webpack中文站文档分离 应用程序(app) 和 第三方库(vendor) 入口
output 配置


output: {
 filename: "static/js/[name].bundle.[hash].js",
 path: path.resolve( __dirname, config.devServerOutputPath )
}



webpack配置合并
主要用到一个webpack插件 webpack-merge，可把分开配置的config合并，分开生产环境和调试环境
最后奉上github地址: webpack-multi-skeleton ,有不对之处，请指正！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。