Webpack基础之四个核心介绍

入口(Entry)：

webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件也就是入口文件。

在 webpack 中，我们使用 webpack 配置对象(webpack configuration object) 中的 entry 属性来定义入口

出口(Output)：

将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)



在上面例子中，我们正在通过 output.filename 和 output.path 属性来描述 webpack bundle 的名称，以及我们想要生成(emit)在哪里

加载器(Loader)：

webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理，webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中



以上配置中，我们对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这可以告诉 webpack compiler 如下



在遇见被解析为”.js”和”.jsx”的路径的文件时，在将他们打包之前，通过use设置的”babel-loader”转换成一个模块，再将这些文件添加到依赖图表中

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。在定义错时 webpack 会提出严重的警告

插件(Plugins)：

你可以在一个配置中多次使用插件作为不同的目的，想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。由于需要在一个配置中，多次使用一个插件，来针对不同的目的，因此你需要使用 new 来创建插件的实例，并且通过实例来调用插件。