欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间:2025/3/20 编程问答 28 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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了  当然后面有些其他的额外例子  供给大家学习,语言方面不是很有天分,只能靠补了 ,大家互勉

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/ygapp/p/6665845.html

总结

以上是生活随笔为你收集整理的webpack2.x基础属性讲解(二)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。