美文网首页
webpack多目录入口打包

webpack多目录入口打包

作者: DXYang | 来源:发表于2020-12-03 10:35 被阅读0次
  /**
   * 在根目录下建多个子目录
   * 每个子目录的下会创建一个 app.ts
   * app.ts 作为 webpack 构建的入口文件
   * entries 收集了多目录个入口文件,并且每个入口还引入了一个用于热更新的文件
   * entries 是一个对象,key 为目录名
   */
  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
    const fullDir = path.join(__dirname, dir)
    const entry = path.join(fullDir, 'app.ts')
    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
      entries[dir] = ['webpack-hot-middleware/client', entry]
    }
    return entries
  }, {}),


  /**
   * 根据不同的目录名称,打包生成目标 js,名称和目录名一致
   */
  output: {
    path: path.join(__dirname, '__build__'),
    filename: '[name].js',
    publicPath: '/__build__/'
  },

相关文章

  • webpack多目录入口打包

  • webpack(七) 动态打包多入口文件

    webpack如何打包多入口文件webpack打包文件主要是靠entry中配置对象,对象的key有几个,那么对象的...

  • webpack教程(一)

    目录 (一) 其他 准备工作 安装webpack(二) webpack配置 单入口文件配置 多入口配置 准备工作 ...

  • webpack 多文件入口打包

    1、webpack打包是基于寻找js文件 分离 css 实现打包 在网上找到多入口打包都不适合项目 于是乎基于找的...

  • webpack 3多入口打包

  • webpack打包多入口文件

    使用[name]表示动态的名字output对象如果需要每次打包产生新的文件,并且指定生成8位hash码,可以这样写...

  • webpack 多入口应用项目配置

    目的 多入口 可配置 新手适用 包含 webpack配置 多入口打包 静态服务 可以直接引入模块写react/vu...

  • Webpack高级

    1.多页应用打包 在webpack.config.js中修改入口和出口配置 // 1. 修改为多入口 entr...

  • 8 多页面应用打包

    多页面应用打包 在webpack.config.js中修改入口和出口配置 修改入口为对象,支持多个js入口,同时修...

  • webpack

    webpack基本概念 1、entry:入口 webpack可以同时打包多个文件,只要规定了各个文件的入口文...

网友评论

      本文标题:webpack多目录入口打包

      本文链接:https://www.haomeiwen.com/subject/uofmwktx.html