webpack3--配置多入口和多出口

上一篇我们稍微提到了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:

 

感谢阅读~~

posted @ 2018-10-26 18:20  前端[色色]  阅读(3184)  评论(1)    收藏  举报