webpack2.x基础属性讲解(二)

resolve:模块的处理方案

 

resolve.alias：设置模块别名，便于我们更方便引用

通过在resolve.alias对引用的文件设置别名，对引用的模块名称进行简写和地址重定向(例:bootstrap的引用)

 

resolve.extensions:默认解析扩展路径，设置完成后再引入文件后可以节约后缀名 如.js .css .sass等

resolve.modules：设置解析器查找模块的目录，默认是npm使用npm下载的node_modules下

上面是我们常用的配置命令，剩下还有些额外其他的 暂时没有使用到的具体位置，所以就简单介绍一下

 

resolve.mainFields:解析一个目录时,配置的文件将视为文件的入口文件。

下面的代码设置在解析jquery的文件路径时，进入到jquery下的main.js 或者bower.js进行引用

resolve.descriptionFiles:描述文件，配置文件将在目录中读取

如 resolve:{descritionFiles:['package.json','bower.json']}

 

resolve.aliasFields：别名字段 描述文件中这些字段提供了该包的别名对照关系

 

resolve.enforceExtension:bool值; 是否强制使用扩展名。如果为false时候，在解析一个文件，也会尝试匹配无扩展名的文件

 

resolve.moduleExtensions: 模块后缀名，解析一个模块时，将会尝试附加这些后缀名

 

resolve.enforceModuleExtension:bool值.强制使用模块后缀名，如果值为false,在解析一个模块名时,也会尝试匹配不包含后缀名的模块。

 

Externals：用于设置引用外部的环境进行模块构建，有利于程序优化,注意一点 externals配置的外部变量对象一般为某一个插件提供的对象。如:jquery=>$|jQuery  swiper=>Swiper angular=>Angular

 

 

 

 

plugins:用语webpack在构建工具时的多种创建方式

 

webpack内置对象optimize 用来对构建的文件进行优化，提供了两个方法

optimize.uglifyJsPlugin : 压缩js文件

optimize.CommonsChunkPlugin:js编译文件的模块提取(我个人认为webpack比gulp好的一块 分割代码)

 

ExtractTextPlugin：编译文件的css模块提取

 

注:大部分plugins需要额外进行下载

 

以上基础的的webpack属性就简单over了  当然后面有些其他的额外例子  供给大家学习，语言方面不是很有天分，只能靠补了 ，大家互勉