webpack 4

webpack

入口（entry）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，也就是项目的主文件，一般为index.js或者App.js

webpack会找出所有被主文件（直接或间接引用）引用的模块和库

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）

entry指定多个入口

数组

向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

多页面应用程序

出口（output）

output.path 

output.path 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

整个应用程序结构，都会被编译到你指定的输出路径的文件夹./dist中

output.filename

output.filename属性是在项目打包完成之后，指定输出的js文件名称

loader（module）

在webpack配置文件中，loader用module来表示，而要配置loader需要在module.rules属性中

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

module.rules有两个属性：

这个配置的意思是告诉webpack 编译器，当碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在打包之前，先使用 raw-loader 转换一下。

test 属性

test 属性，用于标识出应该被对应的 loader 进行转换的文件，用于匹配在 require()/import 语句中能被解析为test正则表达式匹配的路径。

use 属性

use 属性，表示进行转换时，应该使用哪个 loader。

插件（plugins）

插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

需要注意的是，插件（plugins）使用的时候需要用require引入，而loader不需要。

常用插件

extract-text-webpack-plugin 抽离css样式

html-webpack-plugin

自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)

title 设置html 文件的标题

filename  设置html 文件的文件名。默认为 index.html

inject 生成的script标签位于html文件的body，head或者不生成js文件

favicon 给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名

minify 对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。

hash 给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。进行版本控制

chunks chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。

webpack-manifest-plugin

该插件可以显示出编译之前的文件和编译之后的文件的映射

打包之后，public中会生成一个manifest.json的文件来显示映射关系