webpack4.x 系列-entry（入口）

之前写过webpack4系列文章，本次对webpack4进行更再次研究学习

webpack官网

webpck中文网

中文网更新慢，建议两个官网配合参考，已官网为主，中文辅助

我们先了解一下webpck的几个核心概念

• Entry（入口）
• Output（出口）
• Loaders（加载器）
• Plugins（插件）
• Mode（模式）
• Browser Compatibility（浏览器兼容性）

截止到目前，webpck4，最高版本是4.32.2，demo以此版本为主

开发环境搭建

项目地址

初始化，这一步不用赘述

npm init

也可以执行

npm init -y

快速的进行初始化

安装webpck和webpack-cli

webpack-cli是 Webpack 的 CLI （Command-line interface）工具

npm install --save-dev webpack
npm install --save-dev webpack-cli

方便演示在demo中添加lodash

npm install --save lodash

demo初始化（具体参见 官网 ）

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

import _ from 'lodash';
  function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }
  document.body.appendChild(component());

index.html

webpck4支持零配置

方便开发，我们全局安装npx

npm install -g npx

npx 是一个方便开发者访问node_modules内的命令行的小工具，npx webpack -v 相当于执行了

node ./node_modules/webpack/bin/webpack -v

开始打包

我们可以使用

npx webpack

进行打包

或者也可修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "build":"webpack"
  },

因为没有配置打包模式（mode），默认启用了production模式

关于mode，稍后讨论

我们观察，在package.json的同级目录下生成了一个dist文件夹，dist文件夹下有一个main.js，这是怎么来的？

webpack4既然支持零配置，那么就必然存在默认配置，作为前端，对于webpack的工作就是根据自己的项目需求，更改webpack的这些默认配置

要修改默认配置，毋庸置疑，我们就要添加配置文件

关于配置文件的命名，没有强制要求，但是一般会做如下命名

webpck.xxx.js

例如

webpck.config.js

webpck.common.js

webpck.dev.js

webpck.pro.js

入口（entry）和出口（output）

我们在根目录下创建一个webpack.config.js

entry

关于entry， 中文网 介绍的很详细，下面做简单介绍

入口分单入口和多入口（但是出口只会有一个）

在webpack.config.js中我们使用commonjs语法进行导出

单入口，简写方式如下

module.exports = {
  entry: "./src/index.js"
};

修改package.json

"build":" webpack --config webpack.config.js"

删除dist，执行

npm run build

dist 目录下打包出main.js文件

entry调整

module.exports = {
  entry: {
    main: "./src/index.js"
  }
};

删除dist，执行打包

没有什么变化，再次调整，将main改为main1

module.exports = {
  entry: {
    main1: "./src/index.js"
  }
};

删除dist，执行打包

dist 目录下打包出main1.js文件

我们得出结论

单入口打包，默认入口名称为main，可以省略，省略后，可以使用字符串来配置入口

出口的输出名就是入口名，关于出口的具体内容稍后讨论

说完了单入口，再看多入口

多入口

多入口支持数组和对象

配置多入口，代码做如下调整

src 下

新建MutiEntryIndex1.js

import _ from "lodash";
function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["webpack", "多入口打包文件1"], " ");

  return element;
}

document.body.appendChild(component());

新建MutiEntryIndex2.js

import _ from "lodash";
function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["webpack", "多入口打包文件2"], " ");

  return element;
}

document.body.appendChild(component());

index.html做如下修改

<!--  -->
    
    

webpck.config.js

module.exports = {
  entry: {
    MutiEntryIndex1:"./src/MutiEntryIndex1.js",
    MutiEntryIndex2:"./src/MutiEntryIndex2.js",
  }
};

删除dist 目录，执行打包npm run build

dist 下生成两个js文件

MutiEntryIndex1.js

MutiEntryIndex2.js

打开index.html

同样的，多入口支持简写

module.exports = {
  entry: ["./src/MutiEntryIndex1.js","./src/MutiEntryIndex2.js"]//多入口简写
};

可以发现，简写多入口后，入口文件名没了，

打包后发现dist下生成一个main.js

我们修改index.html,然后引入main.js

浏览器打开index.html

显示不变

这似乎不是一种值得推荐的简写方式，不过没有好与坏，结合自己的需要使用吧

多入口应用场景 参考

1. 分离 应用程序(app) 和 第三方库(vendor) 入口；
   关于这个问题，有诸多解决方案，webpack4可以通过optimization.splitChunks对此进行优化，后面讨论

2. 多页面应用程序；

   关于多页面，配合html-webpack-plugin使用，是最佳选择，当然不是必须的

context(上下文)

基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader

如果配置了context

则修改entry的配置

const path =require('path')
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",//单入口简写
};

效果相同

entry总结

关于entry（入口就介绍到这里）

entry支持单入口，多入口，

支持字符串，数组，对象的方式

entry的默认名为main，如果要修改，使用对象的方式进行调用和配置