3-6 Entry 与 Output的基础配置

love丁酥酥

发布于 2019-07-18 15:57:13

5030

发布于 2019-07-18 15:57:13

文章被收录于专栏：coding for lovecoding for love

1. 简介

entry与output，顾名思义，就是打包的入口与输出，其实之前我们已经接触了这两个参数，下面详细介绍一下这两个参数的配置。

2. entry

entry有静态和动态两种。我们这里只考虑静态。静态入口又有两种写法。简写写法和对象写法。

2.1 简写写法：entry: string|Array<string>

2.1.1 单入口

如下结构和配置

image.png

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    }), new CleanWebpackPlugin()]
};

// index.js
import Header from './header';
import Sidebar from './sidebar';

new Header();
new Sidebar();

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>esmodule-oop</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

运行打包命令后如下：

image.png

image.png

可以看到自动输出到了dist目录，并且输出文件名为main.js。

2.1.2 多入口

我们试着增加一个入口，content.js如下：

image.png

// content.js
import Content1 from './content1';

new Content1();

// content1.js
export default function Content1() {
    var dom = document.getElementById('root');
    var content1 = document.createElement('div');
    content1.innerText = 'content1';
    dom.appendChild(content1);
}

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: ['./src/index.js', './src/content.js'],
    mode: 'development',
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    }), new CleanWebpackPlugin()]
};

打包出来如下：

image.png

仍然只有一个index.html和一个main.js。但是打开html看到

image.png

content1内容也展示出来了。试着交换数组里面两个入口的位置，会发现html中content1会出现在最上面

image.png

2.1.3 小结

综上可知，简写写法支持字符串和字符串数组，如果是字符串数组，会按顺序从前到后进行解析，只能支持输出单个文件，且默认输出到dist目录下的main.js文件。

2.2 对象写法 object { <key>: string | [string] }

2.2.1 单入口单输出

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    }), new CleanWebpackPlugin()]
};

打包后，生成目录如下：

image.png

仍然是dist目录，但是js文件名确是index。也就是不指定输出的时候，对象写法的key其实就是最终输出的文件名。而

entry: './src/index.js',

其实就等价于

    entry: {
        main: './src/index.js'
    },

2.2.2 多入口单输出

entry修改如下：

    entry: {
        index: ['./src/index.js', './src/content.js']
    },

打包后如下：

image.png

image.png

也即：

entry: ['./src/index.js', './src/content.js'],

等价于：

    entry: {
        main: ['./src/index.js', './src/content.js']
    },

2.2.3 多入口多输出

entry修改如下：

    entry: {
        index: './src/index.js',
        content: './src/content.js'
    },

image.png

打包后如下，在dist目录下生成了两个与key同名的文件。

3. output

output用于指定打包输出的一些特性。这里主要关注两点，即目录和输出文件名。如下：

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
    entry: {
        index: "./src/index.js",
        content: "./src/content.js"
    },
    output: {
        path: path.resolve(__dirname, 'bundle'),
        filename: "[name].js"
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin({
        template: "./src/index.html"
    }), new CleanWebpackPlugin()]
};

打包后如下：