唯雪博客

webpack入门爬坑记录(一)

唯雪博客

入门webpack,看这篇就够了,原文地址http://www.jianshu.com/p/42e11515c10f

这真是一篇好文,对于入门的来说非常实用,配合webpack文档,食用最佳

按照流程基本都能配置出来,不过有几个地方,不知道是插件升级,还是什么原因按照作者的配置会报错

     一、在介绍postcss-loader时,按照作者的介绍配置后,一直报如下图的错

唯雪博客

折腾了半天,看了原文档https://github.com/postcss/postcss 

还是一直报错,最后只有卸载了这个loader接着往下走,如果是初学者,暂时只是想好好研究透webpack不妨先将这个loader卸载了,后期,在想办法解决,不然,卡在这无法继续进行的

    二、 产品构建阶段,作者抽离webpack.production.config.js时有几个地方可能不能照着原文做

第一处:

    唯雪博客

   作者这里是引用了一个把css从js中抽离的插件,extract-text-webpack-plugin

使用这个插件需要先npm install 

npm install extract-text-webpack-plugin --save-dev

然后再配置中两处,引用

唯雪博客

其次:在package.json中配置build时,作者的配置的,是

"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"},

这应该是mac下的配置,window系统下是不能直接这样写的,需要改成如下配置

"build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js --progress"

其他基本按照作者的流程不会有什么大问题了。

总结一下,主要的收获体现在一下几个方面:

首先:webpack 的模块化思想,webpack把一切资源都视为模块,js,css,图片,json数据

    这句话可能听起来有点抽象,使用过es6的童鞋可能对模块化的认识更深入些,模块化的思想,就是在使用webpack时我们将每个功能与资源当作一个整体,一块,该对外输出就输出,该引用就引用。

其次:配置webpack的入口和出口,其实安装了,webpack,配置了入口,出口,计算可以运行webpack,其他的不过是提升附加价值了

然后:loader和plugin,这两块内容是让webpack功能强大的核心,api也特别多,需要时间积累,整理自己常用的工具

最后,分离生产模式,和产品构建模式,生产环境下需要方便调试,而生产环境需要稳定性和效率,必须要进行分离。

先把源码附上吧,使用文档改天用空在补。。

webpack-study-1206.zip


白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论