zoukankan      html  css  js  c++  java
  • webpack的 entry

    webpack 在打包的时候有几种选择:

      entry: "./app/entry", // string | object | array
      entry: ["./app/entry1", "./app/entry2"],
      entry: {
        a: "./app/entry-a",
        b: ["./app/entry-b1", "./app/entry-b2"]
      },
    

    对于非单页应用的项目, 经常会选择第三种写法, 设置多个入口, 这没什么问题, 不过有时页面多的话, 维护这个entry 对象挺麻烦的.

    那就换一种思路吧, 通常项目的页面目录都是有规则的, 比如/src/pagea/index.js,  /src/pageb/index.js, 如果可以保持这样的命名阅读的话

    我们可以让entry 自己找到所有的 [pagename]/index.js 入口, 实现打包.

    var glob = require("glob");
    
    var entries = glob.sync("./src/page/*/index.ts").reduce(function (prev, item) {
        key = item.replace(///g, '_').replace(/^./, '').replace(/^\_/, '').replace(/.js$/, '');
        prev[key] = item;
        return prev;
    }, {});
    
    module.exports = {
        entry: entries,
        output: {
            path: path.resolve(__dirname, "bin"),
            filename: "[name].js"
        },
        // ...
    }
    

      

    这里的正则替换的作用是把形如  src/page/projecta/index.js 变成  src_page_projecta_index (name变量的值) 的形式, 然后输出到 bin/src_page_projecta_index.js.

    (完)

  • 相关阅读:
    2021.4.11(每周总结)
    2021.4.9
    2021.4.8
    2021.4.7
    k8s集群安装(一)安装方案介绍
    k8s映射外部服务Endpoints
    Linux服务器配置上网代理squid
    SonarQube学习笔记
    yum安装指定版本mysql
    linux目录没有颜色的处理
  • 原文地址:https://www.cnblogs.com/tangkikodo/p/6541845.html
Copyright © 2011-2022 走看看