上一篇我们稍微提到了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. 用较早版本的APIs实现抽象类

    原文链接:http://android.eoe.cn/topic/android_sdk 用较早版本的APIs实现抽象类 这节课程我们讨论如何创建一个实现类,即能对应新版本的API,又能够保持对老版本 ...

  2. Git--团队开发必备神器

    花了两天时间专门搞了一下git.整理一下分享给大家.以下我们開始.. . 转载请注明出处: http://blog.csdn.net/Hello_Chillax/article/details/474 ...

  3. python进程间通信 实例

    python实现进程间通信简单实例 实例讲解了python实现两个程序之间通信的方法,具体方法:该实例采用socket实现,与socket网络编程不一样的是socket.socket(socket.A ...

  4. 腾讯云服务器 离线安装最新稳定版MariaDB 10.2.6

    数据库方面我们一般都是使用mysql,由于前段时间我们切换到了MariaDB后,当然生产环境也要更着变,谁叫oracle是个碧池呢! mariaDB主要有三种安装方式 源码安装,有点繁琐,不推荐 yu ...

  5. ASP.NET CORE下取IP地址

    先记下来,以后用上了直接来这复制 string ip1 = HttpContext.Request.Headers["X-Real-IP"]; //取IP,NGINX中的配置里要写 ...

  6. [svc]traceroute(udp+icmp)&tracert(icmp)原理

    2018年4月11日 11:41:29更新 工具 发包 触发点 结局 traceroute 初始发udp包 ttl递增,icmp每一跳报ttl超时 udp端口不可达 tracert 初始发icmp r ...

  7. su 和 su -

    单纯使用su切揣到root,读取变量的方式 是non-login shell,这种方式下很多的变量都 不会改变,尤其是PATH,所以root用的很多命令都只能用绝对路径来执行,这种方式只是切换到roo ...

  8. GlobalConfig

    -- 0 - disable debug info, 1 - less debug info, 2 - verbose debug info DEBUG = EDITOR = false -- DEB ...

  9. Angular的重和利

    1.第一重:TypeScript,TypeScript语言的特性还是比较丰富的,而且一直在发展,再就是跨语言集成问题,要想Nice对第三方lib做集成,需要自己写d.ts,针对有些第三方库,这件事情有 ...

  10. setRequestedOrientation

    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//通过程序改变屏幕显示的方向 1.landscape:横屏(风景 ...