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

lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。方便处理js对象，数组，字符串等等，具体信息参见官网
lodash 官网
lodash中文网较多，以下推荐使用
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

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="./dist/main.js"></script>
  </body>
</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"
  },

添加一个build命令
然后执行npm run build
打开index.html

(evernotecid://61429023-83DF-46B0-A28E-60CE0EBC1934/appyinxiangcom/21417035/ENResource/p180)
页面成功打开
打包成功，生成了一个dist目录，同时携带警告信息

因为没有配置打包模式（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做如下修改

    <!-- <script src="./dist/main.js"></script> -->
    <script src="./dist/MutiEntryIndex1.js"></script>
    <script src="./dist/MutiEntryIndex2.js"></script>

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

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

多入口应用场景参考

分离应用程序(app) 和第三方库(vendor) 入口；
关于这个问题，有诸多解决方案，webpack4可以通过optimization.splitChunks对此进行优化，后面讨论
多页面应用程序；
关于多页面，配合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，如果要修改，使用对象的方式进行调用和配置

webpack4.x 系列-entry（入口）

开发环境搭建

入口（entry）和出口（output）

entry

单入口，简写方式如下

多入口

多入口应用场景参考

context(上下文)

entry总结

相关推荐

置顶推荐

最新评论

活跃读者

网站统计

觉得文章有用就打赏一下文章作者

非常感谢你的打赏，我们将继续给力更多优质内容，让我们一起创建更加美好的网络世界！

微信扫一扫

支付宝扫一扫