entry 基本配置


config.entry : {String|Object}  Webpack 构建入口文件配置


这里的entry 对 Webpack 的 entry 进行了增强, 除了支持 webpack 原生 Object(key:value) 方式配置, 还对entry进行了增强。


Webpack entry 原生配置


// ${app_root}/webpack.config.js
module.exports = {
  ......
  entry:{
    home: path.join(__dirname, 'src/page/home/home.js')
  }
}


Webpack entry 自动遍历配置


// ${app_root}/webpack.config.js
module.exports = {
  ......
  entry:{
    include:['src/page']
    exclude:[]
  }
}



entry 自定义初始化入口代码模板


在基于 Webpack 构建时, 我们通常都是用 js 作为 entry 入口问题, 这样需要自己写页面初始化的代码,这样导致入口代码重复繁琐,  需要简化.


在进行页面构建时, 我们希望有统一的入口模板功能, 这样进行页面构建和js构建时, 就不需要写同样的入口代码,  easywebpack  提供 entry.loader 模板功能.


在 Vue/React 项目构建时, 通过 loader 模板配置, 我们可以直接基于 .vue或.jsx 作为入口文件.


// ${app_root}/webpack.config.js
module.exports = {
 entry: {
   include: ['app/web/page', { 'app/app': 'app/web/page/app/app.js?loader=false' }],
   exclude: ['app/web/page/[a-z]+/component', 'app/web/page/app'],
   loader: { // 如果没有配置loader模板,默认使用 .js 文件作为构建入口
      client: 'app/web/framework/vue/entry/client-loader.js',
      server: 'app/web/framework/vue/entry/server-loader.js',
   }	
}


配置说明:



entry 使用框架内置默认初始化代码模板 (easywebpack 4.8.0 新增支持)


config.entry : {String} 必选, 使用 node-glob 遍历文件, 配置举例:



// webpack.config.js
module.exports = {
  entry: 'src/page/**!(component|components|view|views)/*.js'
}



// webpack.config.js
module.exports = {
  entry: 'app/web/page/**!(component|components|view|views)/*.vue'
}



// webpack.config.js
module.exports = {
  entry: 'app/web/page/**!(component|components|view|views)/*.jsx'
}