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.

(完)

时间: 2024-10-24 23:11:49

webpack的 entry的相关文章

webpack 多entry 配置

// webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', demo2: './demo.js' }, output: { path: __dirname, filename: '[name].js' } };

webpack 学习

我的 webpack.config.js module.exports = { entry: [ './src/js/app.js', './src/js/my.js' ], output: { path: __dirname + '/output/', publicPath: "/output/", filename: 'main.js' }, module: { loaders: [ {test: /\.(jpg|png)$/, loader: "url?limit=81

详解前端模块化工具-Webpack

React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? Webpack是什么 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用于前端.随着npm成为主流的JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm

webpack 总结(写了个开头 想想还是不写了留着官网和别人博客地址)

关于webpack的资料大体分3处 ,一处是官网(纯英文,资料比较多),一处是中文网(不建议,就如不知道谁说的一句话,讲的是1+1,而实际用的却是微积分难度),还有各大博客,知识点零散,无系统知识架构,所以只好慢慢根据官网总结. 配置文件config:可以自己写也可以默认的webpack init生成 配合npm 使用 "scripts": { "build": "webpack" }, 可以用"--"传自定义参数进去,请大胆

webpack解惑:多入口文件打包策略

本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包.文章包含我探索的过程以及webpack在使用中的一些技巧,希望能给大家带来参考价值. 首先,项目打包策略遵循以下几点原则: 选择合适的打包粒度,生成的单文件大小不要超过500KB 充分利用浏览器的并发请求,同时保证并发数不超过6 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包 避免

webpack基础配置梳理梳理

首先来一个示例的目录结构--- Application |--- Home | |--- View (线上用户访问的.html目录) --- Public (线上资源文件目录) |--- js |--- images |--- css |--- ... --- source (前端开发目录) |--- index (一个业务需求模块,每个业务需求模块下会有很多页面) | |--- index (index 页面) | | |--- images | | |--- index.html | | |

webpack+vue自学(1)

webpack: npm webpack -g //全局安装webpack npm init   //创建项目 npm install webpack --save-dev //安装webpack依赖 完成后如图 entry.js的内容: first.js的内容: 打包的过程:webpack  src\entry.js src\bundle.js 打包正常完成后在浏览器中访问index.html ,查看源代码,既看到结果.

webpack快速入门——webpack3.X 快速上手一个Demo

1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件. 2.在dist下建立一个index.html文件,写入以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

webpack之前端性能优化(史上最全,不断更新中。。。)

最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在用webpack时一般都会选择多入口文件吧,为的就是将自己的源码跟第三方库代码分离.这是之前的代码, entry: { entry: './src/main.js', vendor: ['vue', 'vue-router', 'vuex', 'element-ui','echarts'] }, o