3-6 Entry 与 Output的基础配置
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()]
};
打包后如下：
image.png
可以看到path是显示指定输出目录，而fileName是指定打包后文件的名称。
参考
https://www.webpackjs.com/concepts/#%E5%85%A5%E5%8F%A3-entry-
https://www.webpackjs.com/configuration/entry-context/
https://www.webpackjs.com/configuration/output/
https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js
