Webpack4.3概念入口起点(entry points)

5567 阅读 0 评论 5 点赞

正如我们在起步中提到的，在 webpack 配置中有多种方式定义 entry 属性。除了解释为什么它可能非常有用，我们还将向你展示如何去配置 entry 属性。

单个入口（简写）语法

用法：entry: string|Array<string>
webpack.config.js

const config = {
    entry: './path/to/my/entry/file.js'
};
module.exports = config;

entry 属性的单个入口语法，是下面的简写：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。

在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

当你正在寻找为「只有一个入口起点的应用程序或工具（即 library）」快速设置 webpack 配置的时候，这会是个很不错的选择。然而，使用此语法在扩展配置时有失灵活性。

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js

const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } };

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

常见场景

以下列出一些入口配置和它们的实际用例：
分离应用程序(app) 和第三方库(vendor) 入口
webpack.config.js

const config = {
     entry: {
          app: './src/app.js',
          vendors: './src/vendors.js'
  }
};

这是什么？从表面上看，这告诉我们 webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。
为什么？此设置允许你使用 CommonsChunkPlugin 从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle，并把引用 vendor 的部分替换为 __webpack_require__() 调用。如果应用程序 bundle 中没有 vendor 代码，那么你可以在 webpack 中实现被称为长效缓存的通用模式。
为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

多页面应用程序

webpack.config.js

const config = {
       entry: {
             pageOne: './src/pageOne/index.js',
             pageTwo: './src/pageTwo/index.js',
             pageThree: './src/pageThree/index.js'
      }
};

这是什么？我们告诉 webpack 需要 3 个独立分离的依赖图（如上面的示例）。
为什么？在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：
使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

根据经验：每个 HTML 文档只使用一个入口起点。

以上概念中提出了好几个问题：
当你向 entry 传入一个数组时会发生什么？
两个这是什么？
两个为什么？

从单个入口开始跑一遍再说，说到这里所以看过官方指南的你就明白要做些什么事情了吧！

1、安装环境，本地安装还是全局安装，我这里选用的本地安装，（那就得看下指南本地安装和起步基本安装啦）下面是起步基本安装，本地安装自己安装看下；

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ npm init -y
Wrote to D:webpack_demopackage.json:

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.30.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ npm install webpack webpack-cli --save-dev

> webpack-cli@3.3.2 postinstall D:webpack_demonode_moduleswebpack-cli
> node ./bin/opencollective.js

                            Thanks for using Webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.

                 Donate: https://opencollective.com/webpack/donate

npm notice save webpack is being moved from dependencies to devDependencies
npm WARN webpack_demo@1.0.0 No description
npm WARN webpack_demo@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.30.0
+ webpack-cli@3.3.2
added 66 packages from 28 contributors, updated 1 package and audited 5229 packages in 342.691s
found 0 vulnerabilities

先看下安装完目录结构（没有新建任何文件）

新建webpack.config.js文件加入单一入口相关代码，不选（文中说的简写那个了），看下加入代码中是不是还要个入口文件呢？

没有file.js文件编译看报什么错？编译出现的配置警告先跳过。

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ webpack

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 9d7dc940f073d9e06a7a
Version: webpack 4.30.0
Time: 82ms
Built at: 2019-05-07 22:26:09

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './path/to/my/entry/file.js' in 'D:webpack_demo'

我新建了个file.js空文件，编译下是否还报错呢？这里要是用 npm run build 编译报错那这里就先跳过。

没报错了吧！不过是空文件，所以是0bytes

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ webpack
Hash: 0f57eaab8371e0356c0f
Version: webpack 4.30.0
Time: 631ms
Built at: 2019-05-07 22:29:31
  Asset       Size  Chunks             Chunk Names
main.js  930 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./path/to/my/entry/file.js 0 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

还编译出了个main.js文件，什么情况？

配置webpack.config.js文件，对象语法，编译后出现了什么情况？

再次编译会出现什么？是不是多生成了个文件？

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ webpack
Hash: 7b2ef231edb89d3a3c1b
Version: webpack 4.30.0
Time: 634ms
Built at: 2019-05-07 22:55:29
     Asset       Size  Chunks             Chunk Names
   main.js  930 bytes       0  [emitted]  main
vendors.js  931 bytes       1  [emitted]  vendors
Entrypoint main = main.js
Entrypoint vendors = vendors.js
[0] ./path/to/my/entry/file.js 0 bytes {0} [built]
[1] ./path/to/my/entry/vendors.js 0 bytes {1} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

而且两个文件生成的内容基本一致，说明了什么？

多页面应用程序

生成三个文件，看下里面的内容是否都一个样，为什么？

Administrator@PC-20190222QKVD MINGW64 /d/webpack_demo
$ webpack
Hash: aeadf176b2da09776c37
Version: webpack 4.30.0
Time: 131ms
Built at: 2019-05-07 23:10:42
       Asset       Size   Chunks             Chunk Names
  pageOne.js  930 bytes  0, 1, 2  [emitted]  pageOne
pageThree.js  930 bytes  1, 0, 2  [emitted]  pageThree
  pageTwo.js  930 bytes  2, 0, 1  [emitted]  pageTwo
Entrypoint pageOne = pageOne.js
Entrypoint pageTwo = pageTwo.js
Entrypoint pageThree = pageThree.js
[0] ./path/to/my/entry/file.js 0 bytes {0} {1} {2} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

完结！

点赞(5) 打赏

本文分类：WebPack
本文标签：JavaScript webpack4.30 vue.js
浏览次数：5567 次浏览
发布日期：2019-05-07 19:15:00
本文链接：https://www.dianthink.com/detail/300.html

上一篇 > Webpack的介绍以及概念，Webpack是什么，怎么用？
下一篇 > Webpack4.3概念输出(output)

Webpack4.3概念入口起点(entry points)

单个入口（简写）语法

对象语法

常见场景

以上概念中提出了好几个问题：
当你向 entry 传入一个数组时会发生什么？
两个这是什么？
两个为什么？

从单个入口开始跑一遍再说，说到这里所以看过官方指南的你就明白要做些什么事情了吧！

先看下安装完目录结构（没有新建任何文件）

新建webpack.config.js文件加入单一入口相关代码，不选（文中说的简写那个了），看下加入代码中是不是还要个入口文件呢？

没有file.js文件编译看报什么错？编译出现的配置警告先跳过。

还编译出了个main.js文件，什么情况？

配置webpack.config.js文件，对象语法，编译后出现了什么情况？

再次编译会出现什么？是不是多生成了个文件？

而且两个文件生成的内容基本一致，说明了什么？

多页面应用程序

生成三个文件，看下里面的内容是否都一个样，为什么？

评论列表共有 0 条评论

发表评论取消回复

Webpack4.3概念入口起点(entry points)

单个入口（简写）语法

对象语法

常见场景

以上概念中提出了好几个问题： 当你向 entry 传入一个数组时会发生什么？ 两个这是什么？ 两个为什么？

从单个入口开始跑一遍再说，说到这里所以看过官方指南的你就明白要做些什么事情了吧！

先看下安装完目录结构（没有新建任何文件）

新建webpack.config.js文件加入单一入口相关代码，不选（文中说的简写那个了），看下加入代码中是不是还要个入口文件呢？

没有file.js文件编译看报什么错？编译出现的配置警告先跳过。

还编译出了个main.js文件，什么情况？

配置webpack.config.js文件，对象语法，编译后出现了什么情况？

再次编译会出现什么？是不是多生成了个文件？

而且两个文件生成的内容基本一致，说明了什么？

多页面应用程序

生成三个文件，看下里面的内容是否都一个样，为什么？

Js、JavaScript、JQuery Math sin cos，setInterval

php+jquery+css+mysql+html开发网页选项卡

VueJs Style 绑定内联样式 对象语法

VueJs Class 与 Style 绑定 用在组件上

评论列表 共有 0 条评论

发表评论 取消回复

以上概念中提出了好几个问题：
当你向 entry 传入一个数组时会发生什么？
两个这是什么？
两个为什么？

VueJs Style 绑定内联样式对象语法

VueJs Class 与 Style 绑定用在组件上

评论列表共有 0 条评论

发表评论取消回复