51

webpack4.x 系列-entry（入口）

 4 years ago
source link: https://www.tuicool.com/articles/JVzaIjR
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

webpack官网

webpck中文网

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

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

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

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

开发环境搭建

目录

  • 入口（entry）和出口（output）

项目地址

初始化，这一步不用赘述

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

EVBjU37.png!web

(evernotecid://61429023-83DF-46B0-A28E-60CE0EBC1934/appyinxiangcom/21417035/ENResource/p180)

页面成功打开

打包成功，生成了一个dist目录，同时携带警告信息

ZrmQniV.png!web

因为没有配置打包模式（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

fiiUVj2.png!web

同样的，多入口支持简写

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

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

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

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

浏览器打开index.html

fiiUVj2.png!web

显示不变

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

多入口应用场景 参考

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK