上一篇我们稍微提到了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. MySql（十六）：MySql架构设计——MySQL Cluster

    前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等高级功能.和 Oracle Real Cl ...

  2. 关于 ASP.NET 中的 Bundle 的补充说明（草稿）

    一直以来,都认为 Bundle 有可能会不正确的压缩,而导致脚本出错,所以一直将这个功能处于禁用状态. 突然发现,其实只是自己使用的不对... 目前发现 Bundle 会导致的错误分两种情况: 1.路 ...

  3. 设置 debug 版本签名与生产版本一致

    debug 版本使用生产版本的签名 在开发过程中,app 直接跑到手机上,用的签名文件是 Android Studio 默认的自动生成的一个签名,与生产版本的 app 签名是不一样的.当接入华为推送的 ...

  4. C++ STL set和multiset的使用

    C++ STL set和multiset的使用 std::set<int> s;那个s这个对象里面存贮的元素是从小到大排序的,(因为用std::less作为比较工具.) 1,set的含义是 ...

  5. cxf、struts、spring中web.xml过滤url问题解决方案

    利用struts2自带的正则匹配,应该说这算是最官方的解决方案了 在struts.properties中加正则匹配 struts.action.excludePattern=/webservice/. ...

  6. 【内核】探究linux内核,超详细解析子系统

    Perface 前面已经写过一篇<嵌入式linux内核的五个子系统>,概括性比较强,也比较简略,现在对其进行补充说明. 仅留此笔记,待日后查看及补充! Linux内核的子系统 内核是操作系 ...

  7. csu1356 ：判断一个环是否为奇数环

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1356 题意:给出一个起始点,一些边,有人从这个起始点开始随意走,问在某一个时候,它是否可以处于任意 ...

  8. loadrunner文本检查点

    将脚本切换回代码界面, 在光标闪烁的上行,添加如下的代码: 添加的代码根据你检查的方式不同而不同, 你可以选择其中之一即可. 代码一: web_reg_find("Text=Payment ...

  9. 修改zerolog使log输出的文件名可以在goland里自动定位--技巧

    如何自动定位文件 最近发现goland会自动识别输出的文件或者url,但是有时候又识别不出来,折腾了一下,发现原来要求文件路径或url两边要有空格 改造zerolog 既然如此,那么让我们来改造一下z ...

  10. Sortable拖拽排序插件数据筛选

    后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...