webpack官网学习笔记

1.基本概念

①入口

入口起点作为内部依赖图的开始，进入入口后找出哪些模块和库是入口起点依赖的。

配置字段entry（指定一个或多个入口起点）

entry：绝对路径或{main：''}

②出口

出口配置来解决在哪里输出创建的bundles以及如何命名

配置字段output

path：path.resolve(__dirname,'dist')

filename：文件名

③依赖loader

将所有非js文件转为webpack可处理的模块，转换为应用程序的依赖图可以直接引用的模块。

字段module

test：识别出应该被对应依赖转换的文件

use：转换文件，并将其添加到依赖图中

module：{rules:[{test:/\.txt$/,use:'raw-loader'}]}

意义：webpack遇到require和import导入语句时，解析为.txt路径时，使用raw-loader转换。

④插件

打包优化及压缩到重新定义环境变量

字段plugins（可通过option配置参数）

plugins：[new 插件（）]

使用方式

先npm安装，再webpackconfig中代码中引入，创建一个实例后再添加到plugins中

2.如何配置

①入口

entry：字符串或数组

如果是数组，将会把多个依赖文件一起注入，并将它们的依赖导向到一个模块。建立单个依赖图

对象语法

entry：{模块名：字符串}

②多入口应用于多页面应用程序或者长效缓存

entry{

pageone：'',pagetwo:'',...

}

webpack 将会建立3 个独立分离的依赖图

②出口

如果创建了多个单独的模块，需要用占位符确保文件唯一

例如：filename：'[name].js',path:__dirname +'./dist'

③loader的使用方式

配置、内联、命令行

配置

module：{rules:[{test:'',use:[{loader:'',{loader:'',options:{modules:true}}}]}]}

④plugins

用法：向plugins属性传入new实例

Function.prototype.apply 方法。通过这个方法你可以把任意函数作为插件传递（this 将指向 compiler）。你可以在配置中使用这样的方式来内联自定义插件。