NPM模块 Webpack的使用

1 NPM的扩展使用

1. npm init：初始化Node.js项目，创建必需的package.json文件
   npm init -y：创建必需的package.json文件(按默认方式)
2. npm help install：查看package.json文件中可用的所有条目
3. npm install xxx：安装指定的依赖模块
   npm install xxx --save：下载指定依赖模块，声明为运行时依赖；
   npm install xxx --save-dev：下载并安装指定依赖模块，声明为开发时依赖；
   npm install：根据package.json中"运行时依赖dependencies"和"开发时依赖devDependencies"下载扩展模块
   运行时依赖：当前项目在部署到服务器上共客户端请求时需要使用到的第三方模块(express)；
   开发时依赖：当前项目在程序员开发阶段(最终运行之前)使用到的第三方模块(sass，gulp压缩文件)；
4. npm run xxx：执行当前目录下package.json中的scripts所定义的命令；若执行如下命令：start、stop、test、rebuild，可以省略run，简写为npm 执行的命令;
   package.json中特殊用法：
   {“scripts”: {“test”: “node ./test.js”}}定义可以使用npm run 执行的命令

2 模块的使用

实际开发中，避免使用全局变量/函数造成全局污染。

	CommonJS规范	ES6模块规范	ES6模块规范
导出	module.exports = {age:20, work:function(){}}只能一次	export var age=20;export function work(){}每个模块可以导出多个内部成员	export default {age:20; work:function(){}}每个模块只能导出一个默认对象
导入	const obj = require(’./xxx’);obj.work();	import {age, work} from ‘./xxx’	import obj from ‘./xxx’;
书写位置	导入/导出可以写在顶级或内部	只能写在最顶级	只能写在最顶级
适用场合	只能在Node.js中使用；不能在浏览器中使用	服务器端node.js不支持	服务器端node.js不支持

3 Webpack的使用

官网：www.webpackjs.com
作用：把多个静态资源文件(脚本/样式/图片等)打包为一个/少数若干个静态资源文件——通过减少客户端请求次数/数据传输量提高Web访问效率；
使用方法：完成web项目后使用Webpack打包静态资源，在HTML中引入打包后的资源文件让客户端请求；
使用步骤：

1. 按照传统方法编写Web项目
2. 下载并安装Webpack所需要的所有模块
   npm i webpack --save-dev
3. 在项目根目录下创建Webpack主配置文件
   webpack.config.js
4. 运行Webpack，读取配置文件，执行打包工作
   node ./node_modules/webpack/bin/webpack.js
5. 修改HTML文件，只引入打包后得到的打包文件