app
 -libs # 第三方插件庫(kù)，可以是css也可以是js，eg：jq
 -static # 公共的靜態(tài)資源文件夾
 -temlates # 模板文件夾
  -*** # 模塊文件夾
  -css # 當(dāng)前模塊獨(dú)有的css文件需要在index.js中import
  -html # 模板文件，計(jì)劃支持html，pug兩種模板語(yǔ)言
  -index.js # 當(dāng)前模塊入口文件

npm i webpack webpack-dev-server -g

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

// 未指定這手動(dòng)指定為生產(chǎn)環(huán)境
process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'product';
// 獲取環(huán)境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace( /(\s*$)|(^\s*)/ig, "" );
// 根據(jù)環(huán)境變量引用相關(guān)的配置文件
module.exports = require( `./config/webpack.config.${env}.js` )

function getEntryDir() {
  let globPath = 'app/templates/**/*.' + config.tplLang
  // (\/|\\\\) 這種寫(xiě)法是為了兼容 windows和 mac系統(tǒng)目錄路徑的不同寫(xiě)法
  let pathDir = 'app(\/|\\\\)(.*?)(\/|\\\\)html'
  let files = glob.sync( globPath )
  let dirname, entries = []
  for ( let i = 0; i < files.length; i++ ) {
    dirname = path.dirname( files[ i ] )
    entries.push( dirname.replace( new RegExp( '^' + pathDir ), '$2' ) )
  }
  return entries;
}

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` );
  } )

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() // 第三方類(lèi)庫(kù)

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