上一篇我们稍微提到了webpack.config.js。今天主要来说下如何配置多入口，多出口。

我们之前写到的webpack.config.js，具体代码如下：

module.exports = {

    mode: 'development',

    //入口

    entry: __dirname + '/src/entry.js',

   //出口

    output: {

        path:__dirname + '/dist',

        filename: 'bundle.js',

    }

}

上面的entry 和 output 就是单一的入口和出口。

下面我们创建一个多入口，多出口的实例。

准备工作如下：

1. 新建文件夹：page，并在该文件夹下面创建 index.html 和 signup.html 2个文件

index.html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>index</title>

</head>

<body>

    <div id="title"></div>

    <script src="../src/base.js"></script>

    <script src="../src/index.js"></script>

</body>

</html>

index.html 引用了base.js 和 index.js。js文件我们等会创建。

signup.html代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>signup</title>

</head>

<body>

    <script src="../src/base.js"></script>

    <script src="../src/signup.js"></script>

</body>

</html>

signup.html 引用了base.js 和 signup.js。

2. 在src文件夹下面创建base.js,  index.js, signup.js 3个js 文件：

base.js:

var open=true;

export {open};

index.js:

import {open} from './base';

if(open){

    document.body.innerHTML=`<a href="signup.html">注册</a>`

}

signup.js:

import {open} from './base';

if(open){

    document.body.innerHTML=`<h1>Hello World!</h1>`

}else{

    document.body.innerHTML=`<h1>暂不开放注册</h1>`

}

从上面我们得知 index.html 页面引用了base.js 和 index.js ，

signup.html 引用了base.js 和 signup.js。

我们通过webpack如何分别打包js文件呢？这里我们通过 webpack 的多入口 和 多出口配置就能达到该目的了。

3. 配置多入口，多出口：

module.exports = {

    mode: 'development',

    entry: {

        index:__dirname + '/src/index.js',

        signup:__dirname + '/src/signup.js',

    },

    output: {

        path:__dirname + '/dist',

        filename: '[name].bundle.js',

    }

}

跟单入口，单出口的文件相比，entry现在是一个对象了，output 的 filename 多了一个 [name].。

最后执行打包命令，可以看到 dist 目录下面生成了 index.bundle.js 和 signup.bundle.js 。

所以这里的 [name] 等同于 entry 定义的键名。

执行结果如下：

文件打包完成之后，记得把你html 引用的js 路径改成你打包后的js路径。如下图：

index.html:

signup.html:

感谢阅读~~

webpack3--配置多入口和多出口的更多相关文章

  1. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  2. webpack配置（入口出口）

    const path=require('path'); //是node.js的path模块 //单入口,单出口 module.exports={ // 入口文件 entry:{ entry:'./sr ...

  3. webpack4.x配置详解，多页面，多入口，多出口，新特性新坑！！

    花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...

  4. vue-cli配置多入口多出口，实现一个项目两个访问地址，区分不同上线环境

    最近工作中需要把项目分割成两块,一块需要跑在微信中,通过微信jdk获取用户资料默认登录,一部分需要给原生app做webview的内嵌页面,当然这部分内容是不跑在微信中的. 所以我想到了把项目分成两部分 ...

  5. webpack 配置多入口文件，输出多出口文件

    const path = require('path') module.exports = { // 入口文件的配置项 entry: { // 入口文件 entry: './src/entry.js' ...

  6. vue项目配置多入口多出口【转载】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...

  7. TP5配置隐藏入口index.php文件

    隐藏的index.php PS:这里说的入口文件指的是公共/ index.php文件,配置文件就在这个目录下 可以去掉URL地址里面的入口文件index.php,但是需要额外配置WEB服务器的重写规则 ...

  8. webpack4 单入口文件配置 多入口文件配置 以及常用的配置

    单入口文件配置 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webp ...

  9. webpack3配置字体图标和打包相关问题

    webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...

随机推荐

  1. DBUtils查找最大的ID总是返回0

    1.实体: public class Order { private int id; private Date orderDate; public int getId() { return id; } ...

  2. [svc]为何linux ext4文件系统目录默认大小是4k?

    linux ext4普通盘为什么目录大小是4k? Why does every directory have a size 4096 bytes (4 K)? To understand this, ...

  3. 【Unity】4.4 添加角色控制器

    分类:Unity.C#.VS2015 创建日期:2016-04-10 一.简介 设计完毕基本的场景后,一般都需要先运行看看效果如何,即先让场景"动起来",以方便观察不同的位置,而不 ...

  4. ngx_http_stub_status_module

    ngx_http_stub_status_module是一个Nginx的内置 HTTP模块,该模块可以提供Nginx的状态信息.编译的时候 需指定加载该模块: --with-http_stub_sta ...

  5. 关于在node项目使用ioredis遇到的几个坑

    1,在ioredis中使用redis命令的方法的时候,如果有2个以上的参数,必须使用then方法来接收返回的结果,比如: redis.hget('key','field').then(function ...

  6. RenderTexture动态创建纹理

    CCRenderTexture,它允许你来动态创建纹理,并且可以在游戏中重用这些纹理. 使用 CCRenderTexture非常简单 – 你只需要做以下5步就行了: 创建一个新的CCRenderTex ...

  7. elasticsearch 索引延迟 一致性问题等

    https://www.elastic.co/guide/en/elasticsearch/guide/current/near-real-time.html https://www.elastic. ...

  8. .NET MVC+ EF+LINQ 多表联查VIEW显示列表

    1.VIEW 页面显示代码 <link href="~/Content/bootstrap.css" rel="stylesheet" /> < ...

  9. MyBean-关于单实例插件

    单实例插件可以通过两个途径实现 第一个在注册时注册成单实例 beanFactory.RegisterBean(pvPluginID: String; pvClass: TClass;     pvSi ...

  10. Asp.Net正则过滤一个div

    Asp.Net过滤一对标签,例如div.ul.p.li.span等 html = “html page”; Regex regPage = new Regex(@"(?is)<div\ ...