陌上寒

陌上寒个人博客

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
《webpack4.x 系列-entry(入口)》
(evernotecid://61429023-83DF-46B0-A28E-60CE0EBC1934/appyinxiangcom/21417035/ENResource/p180)
页面成功打开
打包成功,生成了一个dist目录,同时携带警告信息
《webpack4.x 系列-entry(入口)》

因为没有配置打包模式(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
《webpack4.x 系列-entry(入口)》
同样的,多入口支持简写

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

可以发现,简写多入口后,入口文件名没了,
打包后发现dist下生成一个main.js
我们修改index.html,然后引入main.js
浏览器打开index.html
《webpack4.x 系列-entry(入口)》
显示不变
这似乎不是一种值得推荐的简写方式,不过没有好与坏,结合自己的需要使用吧

多入口应用场景参考

  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,如果要修改,使用对象的方式进行调用和配置

发表评论

电子邮件地址不会被公开。 必填项已用*标注