上一篇我们稍微提到了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. 两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。

    //table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll( ...

  2. HBase随机读写

    HDFS不太适合做大量的随机读应用,但HBASE却特别适合随机的读写 个人理解: 1.数据库一般都会有一层缓存,任何对数据的更改实际上是先更改内存中的数据.然后有异步的守护进程负责将脏页按照一定策略刷 ...

  3. android辅助开发工具包介绍

    辅助开发工具包(ADK)是为硬件制造商和业余爱好者准备的参考实现.硬件制造商和业余爱好者可以使用此工具包作为开发Android辅助设备的起点.每一个ADK发行版都将提供源代码和硬件规格,以使整个辅助设 ...

  4. 对于android浏览器的一些看法

    首先我先声明我不是一个浏览器开发者,只是近段时间看了一些关于浏览器的东西,才有一些看法. 在几年前开发手机的web 页面,都经常因为JS插件不兼容android WebView内核,导致开发浪费大量时 ...

  5. iframe调用父页面函数用法举例

    iframe如何调用父页面函数. window.parent.xxxxx();//xxxxx()代表父页面方法具体列子如下,其中包括easyUI的右键和单击事件parent.jspbody部分代码 & ...

  6. [na]ip包格式

    网络层提供的服务就是在不同网段之间转发数据包. Ip包结构 1,格式(每行4byte*5) 2,版本 V4 V6 3,首部长度 20(固定)+可变长度 ,区分服务 Win2008开始:gpedit. ...

  7. 基于ASP.NET MVC的ABP框架入门学习教程

    为什么使用ABP 我们近几年陆续开发了一些Web应用和桌面应用,需求或简单或复杂,实现或优雅或丑陋.一个基本的事实是:我们只是积累了一些经验或提高了对,NET的熟悉程度. 随着软件开发经验的不断增加, ...

  8. nodejs中aes-128-cbc加密和解密

    和java程序进行交互的时候,java那边使用AES 128位填充模式:AES/CBC/PKCS5Padding加密方法,在nodejs中采用对应的aes-128-cbc加密方法就能对应上,因为有使用 ...

  9. spark-architecture

    https://0x0fff.com/spark-architecture-shuffle/ https://0x0fff.com/spark-memory-management/ https://0 ...

  10. 每日英语：Welcome to the Global Middle-Class Surge

    The mass uprisings this summer in Egypt, Turkey and Brazil are powerful reminders that the middle cl ...