上一篇我们稍微提到了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 5.6学习笔记（查询数据、插入、更新、删除数据）

    1. 查询语法 SELECT {*|<字段列表>} [FROM table_references [WHERE where_condition] [GROUP BY {col_name | ...

  2. LeetCode Permutaions II

    LeetCode解题之Permutaions II 原题 输出一个有反复数字的数组的全排列. 注意点: 反复数字的可能导致反复的排列 样例: 输入: nums = [1, 2, 1] 输出: [[1, ...

  3. 一分钟上手, 让 Golang 操作数据库成为一种享受

    gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...

  4. 每日英语：U.S. Media Firms Stymied in China

    China's recent clampdown on foreign media is crimping the expansion plans of Western news organizati ...

  5. 每日英语：Making the Most of Your Lunch Hour

    More Americans are eating lunch at their desks or even forgoing it altogether. Is passing up a prope ...

  6. windows 定时任务：schtasks，定时关闭网易云音乐

    大部分属于转载和粘贴. 使用命令:schtasks windows 定时任务   使用样例: 每天定时关闭网易云音乐: 每天22:20关闭网易云音乐: schtasks /create /tn &qu ...

  7. c++ 调用matlab程序

    以64 bit win7下的matlab 2012a(64bit)和vs2010为例:[1]   在vs2010中新建一个C++控制台工程,添加依赖项:(请根据自己的matlab安装目录更改)[2] ...

  8. postgresql 修改字段名称

    ALTER TABLE auth_user RENAME email TO aemail;

  9. C#学习笔记（9）——委托（窗体传值）

    说明(2017-5-30 11:38:06): 1. 窗体1传值到窗体2,只要实例化Form2,“Form2 frm2 = new Form2(txt1.Text)”,这里要给Form2加一个带参数的 ...

  10. log4e下载地址

    Log4e的插件的下载地址:log4e.jayefem.de/content/view/3/1/