首页 > 程序开发 > web前端 > HTML/CSS >

webpack使用过程中的一些细节总结

2017-01-20

webpack使用过程中的一些细节总结。webpack把不同的、相互依赖的静态资源都视作模块,并且打包成我们想要的静态资源。另外可以方便的配置多种预处理器,如babel。

1.webpack把不同的、相互依赖的静态资源都视作模块,并且打包成我们想要的静态资源。另外可以方便的配置多种预处理器,如babel。

使用webpack,让代码组织更清晰,一个文件就是一个模块。

重要的一个配置文件:package.config.js

配置文件主要分为三大块:

1)entry入口文件:让webpack用来作为项目的入口

2)output出口:让webpack用来存放处理完成的文件

3)module模块:包含处理各种类型文件的模块依赖

2.关于安装项目需要的依赖

如果package.json里已经声明了依赖,那直接npm install就会自动安装所有依赖了。

3.关于安装单个依赖插件的–save-dev或–save的区别

–save是对生产环境所需依赖的声明(开发应用中使用的框架,库),

–save-dev是对开发环境所需依赖的声明(构建工具,测试工具).

正常使用npm install时,会下载dependencies和devDependencies中的模块,当使用npm install –production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块。

4.package.config.js里的方法

1)var path = require(‘path’);

Node中的Path对象,用于处理目录的对象,提高开发效率。

2)path.resolve([from …], to)

将参数 to 位置的字符解析到一个绝对路径里。

from:源路径,to:被解析到绝对路径的字符串

3)在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。

5.当代码更新时自动刷新浏览器,需要webpack-dev-server插件

首先 npm install webpack-dev-server –save-dev

然后在config中配置

然后在package.json中配置运行的命令,npm支持自定义命令

相关文章
最新文章
热点推荐