Monthly Archives: 一月 2016

WebPack学习札记

参考资料

webpack-config.js

webpack命令

  • webpack -w 提供watch方法,实时进行打包更新
  • webpack -p 对打包后的文件进行压缩
  • webpack -d 提供SourceMaps,方便调试
  • webpack —colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
  • webpack —profile 输出性能数据,可以看到每一步的耗时
  • webpack —display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
  • webpack —display-error-details 查看查找过程

module


 

test项表示匹配的资源类型,loader或loaders项表示用来加载这种类型的资源的loader,loader的使用可以参考 using loaders,更多的loader可以参考 list of loaders.

用来定义loader的串联关系,”-loader”是可以省略不写的,多个loader之间用“!”连接起来,但所有的加载器都需要通过 npm 来加载。


 

resolve

resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:


 

注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

loader


 

加载器问号后面的query,参考

css以及图片的引用


 

CSS 跟 LESS, 还有图片, 被直接引用了

实际上 CSS 被转化为 \<style\> 标签, 而图片可能被转化成 base64 格式的 dataUrl

打成多个包

entry 有多个属性, 对应多个 JavaScript 包,
然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来:


 

externals

require一些其他的类库或者API,例如JQuery,Webpack提供了不少shim模块:expose-loader等


 

 

css分离出来,使用link形式

需要使用插件extract-text-webpack-plugin


 

静态资源服务器

Webpack还提供了一个基于Node.js Express框架的开发服务器,它是一个静态资源Web服务器,官方文档